How to clear a function after particular amount of time - javascript

I have a function which keeps on executing i want that whole function(function main())to stop working after 3secs and it has to call another function
$(function main() {
$( "#button" ).click(function() {
$( "#effect" ).addClass( "newClass", callback );
});
function up() {
setTimeout(function() {
$( "#effect" ).addClass( "newClass", callback );
},1000);
}
function callback() {
setTimeout(function() {
$( "#effect" ).addClass( "down" ,up).removeClass('newClass');
}, 1000 );
}
});

In j query there is unbind function for unbind the event for html element following syntax
$(selector).unbind(event,function,eventObj)
Follow following code in your case. it will unbind click event of button after 3 sec.
setTimeout(function(){
$("#button").unbind("click");
}, 3000)

Related

How to use jQuery time interval inside of a jQuery click function?

I am creating a dropdown menu and need the hide the menu bar when the dropdown is expanded and show the menu after a time interval when it is collapsed. The problem is that the code I had is not removing the "toggle-off" class I am adding and removing with jQuery. The result is that the menu bar does not reappear after collapsing the dropdown. The problem is that the part of the jquery function that is within the time interval is not executing.
LINK TO PAGE:
jQuery:
$( ".menu-close" ).click(function() {
var interval = setInterval(function () {
$( ".navbar-header" ).addClass( "toggle-on" );
$( ".navbar-header" ).removeClass( "toggle-off" );
}, 500);
clearInterval(interval);
$( "#mob-nav" ).removeClass( "margin-up" );
$( "#mob-nav" ).addClass( "margin-down" );
$( ".animated" ).removeClass( "go" );
$.scrollLock( false );
});
Why you don't use setTimout()?
$('.menu-open').on('click',function(){
$('.navbar-header').addClass('toggle-off').removeClass('toggle-on');
$('.animated').addClass('go');
$('#mob-nav').addClass('margin-up').removeClass('margin-down');
$.scrollLock( true );
});
and close funciton
$('.menu-close').on('click',function(){
setTimeout(function(){
$('.navbar-header').addClass('toggle-on').removeClass('toggle-off');
}, 500);
$('#mob-nav').removeClass('margin-up').addClass('margin-down');
$('.animated').removeClass( "go" );
$.scrollLock( false );
});
You could implement this function.
setInterval(function(){
if(myDiv.style.display == "block"){
myDiv.style.display = "none";
}else{
myDiv.style.display = "block";
}
}, 3000);

Having troubles with removing and reapearing html elements with jquery

Basically I want to slide down a element, then when the button is hit again I want it to slide up, empty the div, then slide down with the new results. I'v been trying to figure out how to do this for so long and I cant seem to get it working with jquery.
$(".search").on("click",function(){
$('.results').slideUp(500).empty().append("<p>Results</p>").hide().slideDown(500)
});
I understand this is kind of specific to my project kind of but I do feel others might find this useful
I'm not sure what exactly your problem is, but I think the slideUp animation is not shown in your example.
The slideUp method takes a second argument, which is the function callback. It is called when the slideUp action is finished. If you do the rest of your actions in this callback function, is guaranteed to be performed after the slideUp.
jQuery('#testbutton').on('click',function() {
$('#testlist').slideUp(500, function() {
$('#testlist').empty().append("<li>this is a test</li>").slideDown(500);
});
});
You can find a fully working example here:
https://jsfiddle.net/dxyybwyh/5/
I want to slide down a element, then when the button is hit again I
want it to slide up, empty the div, then slide down with the new
results.
It seems simple enough to me
let me know if you need anything more
$('#myButton').click(function () {
if ( $( ".myDiv" ).is( ":hidden" ) ) {
//show the div
$( ".myDiv" ).slideDown( "slow" );
//add content
$( ".myDiv" ).html("New Content")
} else {
//hide the div
$( ".myDiv" ).slideUp( "slow" );
//clear content
$( ".myDiv" ).html("");
}
});
http://codepen.io/Rohithzr/pen/jqmGXg
Updated the pen with append ability and more readability
$('#myButton').click(function () {
if ( $( ".myDiv" ).is( ":hidden" ) ) {
show();
} else {
hide();
clearContent();
appendContent("New Content");
}
});
function clearContent(){
//clear content
$( ".myDiv" ).html("");
}
function appendContent(content){
$( ".myDiv" ).html($( ".myDiv" ).html()+content);
}
function hide(){
//hide the div
$( ".myDiv" ).slideUp( "slow" );
}
function show(){
//show the div
$( ".myDiv" ).slideDown( "slow" );
}

Delaying the Submit button click using Jquery

I am new to Jquery and my Question is can i delay the click on the submit button for example, you cannot click the submit button for 1 second after submitting so I can prevent the Click spamming on the submit button
this is my Click event
$("#btnConfirmEditNo").click(function (e) {
e.preventDefault();
$('#editContactForm').validationEngine('hide');
editwnd.close();
});
also tried the settimeout() but it delays the closing of the window
This example may help you:
Using On - Off
function handleClick(evt) {
$( "#btn" ).prop( "disabled", true );
setTimeout(function() {
$( "#btn" ).prop( "disabled", false );
$('#btn').on('click', handleClick);
}, 1000);
$( this ).off( event );
}
$('#btn').on('click', handleClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
Using One
function handleClick(evt) {
$( "#btn" ).prop( "disabled", true );
setTimeout(function() {
$( "#btn" ).prop( "disabled", false );
$('#btn').one('click', handleClick);
}, 1000);
}
$('#btn').one('click', handleClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
You can register a callback function on a button and subsequently remove that callback using the jquery off method. This means that when the submit button is pressed, you can remove the event handler and then set a timer that will subsequently re-add it after a period of time when the timer fires. You can use the window.setTimer() function to register a function to be called after a period of time.
An alternate algorithm would be to have a class level "flag" that is set when the button is clicked and reset when a timer expires. In your handler for a button press, you would check the value of the flag and, if true, ignore the button press.
Basically setTimeout is used to handle the 1s off state.
Here are two examples:
Using .one()
var $btn = $('#btnConfirmEditNo');
function doSomething() {
// Do here whatever you want
setTimeout(function(){
$btn.one("click", doSomething);
}, 1000);
}
$btn.one("click", doSomething);
Using a flag
function doSomething() {
var el = this;
if(el.noClick) return;
el.noClick = 1;
// Do here whatever you want
setTimeout(function() { el.noClick = 0; }, 1000);
}
$('#btnConfirmEditNo').click(doSomething);

Time jquery function

I have this code below where I want when I click the button, it will wait about 3 seconds to repeat the action.
The code is this:
$( ".menu-show").css({ "visibility":"hidden", "opacity":"0" }),
$( "#bt_web" ).hover(function() {
$( ".menu-show").css({ "visibility":"visible"}),
$( ".menu-show").animate({opacity: 1}, 500);
}, function() {
$( ".menu-show").css({ "visibility":"hidden"}),
$( ".menu-show" ).animate({opacity: 0}, 300);
});
$( "#bt_web" ).hover(function() {
$(this).animate({opacity: 0.2}, 500);
}, function() {
$(this).animate({opacity: 1}, 300);
});
Is there any function in jquery that makes it similar like "setTimeout" of action script?
thank you
Yes, you can use .delay() which delays in milliseconds the function.
An example would be:
$("#id").delay(600).fadeOut();
This would wait 600 milliseconds and then fadeOut().
(If this was what you were talking about)

Calling a jQuery function multiple times

So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!
Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.
Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});

Categories

Resources