jQuery setTimeout / delay in loop + mouseenter

Question

I'm trying to achieve my dream in drawing useless bullshit. But after learning jQuery in 10 minutes, I ran into the problem that the delay function does not work as it should.

So, I have 500 black small divs with class "luls". The idea is that when you hover over them with a mouse, they light up in a random color, and after a certain time they take back the black color. BUT they NOT.

Take a Picture.

$(document).ready(function() {
    $( ".luls" ).each(function(index) {
        $(this).mouseenter(function() {
            // It's just a random color function, do not focus on it.               
            var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
            $(this).css("background-color", hue);
        });
        setTimeout(function() {
            $(this).css('background-color', 'black');
        }, 1000);
    });
});

I tried to use delay() and setTimeout, even mouseover, but it does not work. Need your help.

I think setTimeout rebinds 'this' to the window. So calling $(this) inside setTimeout might be giving you unintended results. — Khauri, Jul 03 '17 at 19:37
In addition, you are calling `setTimeout` outside of the `mouseenter` callback - ie. on the initial load. — Niet the Dark Absol, Jul 03 '17 at 19:38

score 0 · Accepted Answer · answered Jul 03 '17 at 19:40

When you use setTimeout, "this" is no longer what you mean it to be. You need to pass it:

$(document).ready(function() {
    $( ".luls" ).each(function(index) {
        $(this).mouseenter(function() {
            // It's just a random color function, do not focus on it.               
            var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
            $(this).css("background-color", hue);
        setTimeout(function(x) {
            x.css('background-color', 'black');
        }, 1000, $(this));          
        });
    });
});

Tyler Roper · Answer 2 · 2017-07-10T19:20:00.277

I don't think your use of .each is necessary here. Also, be sure to declare $(this) first outside of setTimeout() - as others have mentioned, it will be re-scoped.

//IGNORE THIS PART (Creating black boxes for example, unrelated to answer)
for (var i=0; i < 100; i++) {
    var $d = $("<div class='luls' />");
    $("body").append($d);
}


$(".luls").mouseenter(function() {
    var $self = $(this);
    var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';
    $self.css("background-color", hue);
    setTimeout(function() {
        $self.css('background-color', 'black');
    }, 1000);
});

.luls {
    display: block;
    float: left;
    width: 10vw;
    height: 10vw;
    background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 3 · answered Jul 03 '17 at 19:43

bind 'this' to your function such as in the example below.

$(document).ready(function() {
    $( ".luls" ).each(function(index) {
        $(this).mouseenter(function() {
            // It's just a random color function, do not focus on it.               
            var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
            $(this).css("background-color", hue);
        });
        setTimeout(function() {
            console.log(this);
            $(this).css('background-color', 'black');
        }.bind(this), 1000);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="luls" style="width :100%; height : 20px;" />

jQuery setTimeout / delay in loop + mouseenter

3 Answers3