setTimeout() function doesn't work inside of jQuery each() function

Question

I want to apply code to a series of matched elements with a delay between each. I don't understand why the following code doesn't work:

        jQuery(".myElement").each(function() {
            setTimeout(function() {
                jQuery(this).remove();
            }, 1000);
        });

I know there's been similar questions asked, but the answers haven't worked for me. I understand that this code is simultaneously applying the delays to each matched element, which isn't what I want. But I still can't figure out how to make it work.

possible duplicate of How to add pause between each iteration of jQuery .each()? and How to access the correct this / context inside a callback?. — Felix Kling
– Felix Kling, Commented May 8, 2014 at 23:57

tymeJV · Accepted Answer · 2014-05-08 23:57:34Z

2

No need for .each

setTimeout(function() {
    jQuery(".myElement").remove();
}, 1000);

The reason for now working is because this no longer refers to the element in each -- you could set a context variable, but since you're just removing the elements anyway, just do it in one swoop!

answered May 8, 2014 at 23:57

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mohamedrias · Accepted Answer · 2014-05-09 00:04:53Z

1

JSBIN DEMO

Your issue lies in the fact that you are invoking jQuery(this).remove() and passing the return value of this to your setTimeout. The assumption is that you are intending for this to run when the timeout expires. If that is the case, you need to wrap this in a function, so that function will be passed to setTimeout and executed when the timer expires.

jQuery('.myElement').each(function() {
    var thiz = jQuery(this);
    setTimeout(function() { thiz.remove(); }, 1000);
})

answered May 9, 2014 at 0:04

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

1 Comment

elPastor Over a year ago

Don't know why this is required, but worked but declaring the variable with jQuery() was the trick.

americanknight · Accepted Answer · 2014-05-09 00:37:27Z

1

Thanks for the answers. For whatever reason, I couldn't get either of them to work. This code, however, ended up doing the job for me:

jQuery(".element").each( function(e) {
    var element = jQuery(this);
    setTimeout(function () {
        jQuery(element).remove();
    }, e*1000);
});

answered May 9, 2014 at 0:37

americanknight

7793 gold badges18 silver badges39 bronze badges

Collectives™ on Stack Overflow

setTimeout() function doesn't work inside of jQuery each() function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related