setTimeout in $.each

Question

I'm trying to animate characters '1-by-1', but i cant seem to figure out, why this code isn't working properly:

$('.overlay-listing').hover(function(){
    var idx = 1;
    $('.strip-hov span', this).each(function(){
        if (!$(this).hasClass('splitrow')){
            setTimeout(function(){
               $(this).toggleClass('animate');
            }, idx * 15);
        }
        idx++
    });
});

I really can't seem to find out whats going wrong. I've also tried to change the "idx * 15" => "idx" like:

$('.overlay-listing').hover(function(){
    var idx = 1;
    $('.strip-hov span', this).each(function(){
        if (!$(this).hasClass('splitrow')){
            setTimeout(function(){
               $(this).toggleClass('animate');
            }, idx);
        }
        idx++
    });
});

The code is working properly without the setTimeout, but then the animation is not what i like it to be. Because it is 'all at once' instead of '1-by-1'.

i've also tried: $(this).delay(xxxx).toggleClass('animate'); to no effect.

It didn't do anything. No error just nothingness. but i seem to have figured it out, thanks for your time anyway. — William Schoeman, Mar 10 '21 at 16:14

William Schoeman · Answer 1 · 2021-03-10T16:37:40.193

0

I've found it, solution:

$('.overlay-listing').hover(function(){
            var idx = 1;
            $('.strip-hov span', this).each(function(idx){
                if (!$(this).hasClass('splitrow')){
                    var ethis = $(this);
                    setTimeout(function(){
                       ethis.toggleClass('animate');
                    }, idx * 15);
                }
                idx++
            });
        });

the 'this' inside the setTimeout isn't the 'this' i thought it would be. a new function is called so the 'this' changes it's value.

Thanks for you time anyway!

Edit after Marc's comment:

if (!$(this).hasClass('splitrow')){
   setTimeout(function(r){
       $(r).toggleClass('animate');
   }, idx * 15, this);
}

passed it as a param, Thanks for the cleanup!

edited Mar 10 '21 at 16:37

answered Mar 10 '21 at 16:12

William Schoeman

23
7

You can use "arrow-functions" in this case to avoid using `var ethis=...`, or pass `this` as 3rd argument on `setTimeout...` – Marc Mar 10 '21 at 16:17
Thanks for helping me improve! I just cant seem to get it to work passing it as the 3rd argument. But is my solution bad practice? – William Schoeman Mar 10 '21 at 16:31
Not bad practice per sè but "unclean". As mentionend above there are possibilites given to write it "better"/cleaner. – Marc Mar 10 '21 at 16:36
1

I agree, i've changed my answer. Thank you! – William Schoeman Mar 10 '21 at 16:39

score 0 · Accepted Answer · answered Mar 10 '21 at 16:39

As commented on your solution, here are 2 ways to improve it a litle bit.

Using "this" scope:

$('.overlay-listing').hover(function () {
    var idx = 1;
    $('.strip-hov span', this).each(function (idx) {

        if (!$(this).hasClass('splitrow')) {
            setTimeout(function (scope) {
                $(scope).toggleClass('animate');
            }, idx * 15, this);
        }

        idx++

    });
});

Using "arrow funcions"

$('.overlay-listing').hover(function () {
    var idx = 1;
    $('.strip-hov span', this).each(function (idx) {

        if (!$(this).hasClass('splitrow')) {
            setTimeout(() => {
                $(this).toggleClass('animate');
            }, idx * 15);
        }

        idx++

    });
});

Note, the code is not tested.

setTimeout in $.each

2 Answers2