Develop Reference

Implement delayed jquery change event handler

What I basically want to achieve is create some kind of delayedChange plugin to be able to call some action (such as ajax call to the server) only after some delay the last input change event was fired. At the moment I've came up with this (jsfiddle). I should see alert only in 5 seconds (5000 msec) the last text change had place but it fires immediately.
(function ($) {
var timer;
$.fn.delayedChange = function (onchange, delay) {
return this.each(function () {
$(this).bind('change', function () {
if (typeof onchange == 'function') {
window.clearTimeout(timer);
timer = window.setTimeout(onchange.call(this), delay);
}
});
});
}
})(jQuery);
$(document).ready(function(){
$('input').delayedChange(function(){
alert($(this).attr('id'));
}, 5000);
});
The weirdest is that this code actually worked for some time, and then it's functionality just vanished for no reason. Obviously there is some explanation but I can't see it for now. Are there some more certain ways to implement/improve such plugin?

The functionality you've described is called "debouncing". Libraries such as underscore, lodash, and ampersand have a debounce method to make this effect convenient.'
With underscore, the code is:
$('input').each(function () {
$(this).on('change', _.debounce(...your function..., 5000));
});
No new function is needed, although you will need to include a new dependency.
I'd made a mistake with the first version. You need to generate a separate debounce function for each element, otherwise changing different elements will cause the timer to reset for all of the elements.

Manipulating an object in a setTimeout function that was created by a previous setTimeout function

I have a function to perform an animation using setTimeout functions, structured as follows:
animation: function() {
//first
setTimeout(function(){
makeObject({ ... }); // this makes '#object .secondary' on the DOM
}, 500);
//second
setTimeout(function(){
...
}, 1000);
//third
setTimeout(function(){
$('#object .secondary').doSomething();
}, 1500);
}
I am creating an object associated with the '.secondary' CSS class in the first setTimeout function, then I am trying to select the object and manipulate it using the class name in the third function. However, the object remains unchanged after the third function executes, and I receive the error "Undefined is not a function". I think this is due to the fact that the setTimeouts execute at the same time, so the secondary object does not yet exist to be selected by the third function. So my question is this: how do I manipulate the secondary object from the third setTimeout function?

The timeouts on their own shouldn't be an issue. The 3rd will start around 1 second after the 1st.
But, the error you mentioned would be. Based on your comment:
The calls are actually d3 via d3.select('#object').selectAll('.secondary').fadeOut(50);
It's because D3's Selections, that d3.select() and .selectAll() return, aren't related to jQuery and won't have its methods.
You'll have to either convert the collection from d3 to jQuery before using .fadeOut().
jQuery( d3.select('#object').selectAll('.secondary') ).fadeOut(50);
Or, use jQuery throughout the statement, as you'd suggested doing in your snippet:
jQuery('#object .secondary').fadeOut(50);

How about setting the 2nd&3rd Timeout in the previous one?
E.G.
animation:function() {
setTimeout(function() {
makeObject(…);
setTimeout(function() {
...
setTimeout(function() {
$('#object .secondary').doSomething();
},500);
},500);
},500);
};

how can I animate an element and don't continue till it finished?

I just want to animate element during a game of cards, but the problem is that when I use the animate function the code is continue to run.
I tried with the promise() and done() function, but for some reason it doesn't help.
Here is what I did:
$(document).ready( function() {
$(".demoCard").animate({
"margin-top": '-150'
}, 1000, "easeInSine", function() {
$(".demoCard").remove();
});
});

According to the api documentation. Your callback is correct. Try updating your jQuery api. Maybe you are using an outdated version. If that doesn't work, try removing your easing argument. JQuery might be trying to use the easing argument as a callback function. If you need your easing, make sure you have jQuery UI installed and loaded. Otherwise, jQuery won't recognize the easing, and try to use easeInOutSine as the callback function.

myWait(ms) in jQuery?

I want to extend the $.fn object in order to have a delay between my jquery commands :
like this working (and quite long) code :
$('.d').delay(1000).queue(
function ()
{
$(this).css('background-color', 'green');
$(this).dequeue();
}).delay(1000).queue(function ()
{
$(this).css('background-color', 'red');
$(this).dequeue();
});
a working sample is here : JSBIN
So I tried this :
My code at jsbin
$.fn.myWait = function (ms)
{
return this.queue(
function ()
{
var _self = this;
setTimeout(function ()
{
$(_self).dequeue();
}, ms);
})
};
invoking :
$('.d').myWait(1000).css('background-color', 'red').myWait(1000).css('background-color', 'green');
But it doesnt work.
What am I doing wrong ?
p.s.
I did read this similar solution, but if I remove the animation part and use only css , it also doesnt work.

The .css() does not get queued on the animation queue by itself, that's why you needed to put it in a callback in your first snippet. In the second snippet, it is called immediately (even though there's timeout waiting in the queue - just as like you called .delay()). Instead, you would need to use an .animate() call with a zero-duration.
For allowing the syntax which you wanted, you will need to take a step further. Have a look at the jQuery timing plugin and how their magic works.

I doubt you can do it in this way. You need to defer execution of those attribute changes, which means you shall store said code in individual functions.

Code not running when using ".remove()" function

I'm writing this jquery code :
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){$('#suc').hide('slow')},2500);
$('#suc').remove();
When i remove $('#suc').remove(); like this :
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){$('#suc').hide('slow')},2500);
The code run succefuly, but when i put it, it dosen't run !!
What the problem with that ?
it's illegal to but $('#suc').remove(); here ?

The setTimeout call doesn't wait for the callback to run before the code continues, so you will be removing the element immediately. When the code in the callback tries to hide the element, it's not there.
Remove the element in the complete callback of the hide method:
setTimeout(function(){
$('#suc').hide('slow', function(){
$('#suc').remove();
});
},2500);

As you're using hide you're also safe to use delay, so:
$('#suc').show(700).delay(2500).hide('slow', function () {
$(this).remove();
});
will suffice.
demo: http://jsbin.com/isediz/2/
Also, as a bit of clarification, regarding:
The code run succefuly, but when i put it, it dosen't run !!
Actually the code runs (in a sense), the problem is that your remove will not wait for the two asynchrones events (setTimeout and .hide('slow')). So it will get executed way before those two are done doing what they should do.

You need to put the remove() inside of the setTimeout and in the callback for the hide() function:
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function() {
$('#suc').hide('slow', function() { $(this).remove(); })
}, 2500);

You are using the element setTimout callback which you have already removed with the statement just after setTimout. The call back of setTimeout will execute after the statement removing element with id #suc by the next statement of setTimeout. Remove #suc in hide callback so that it is not accessed by script after removal.
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){
$('#suc').hide('slow',
function(){$(this).remove();
});
},2500);