jQuery setTimeout/delay in loop + mouseenter

Question

私は無駄な馬鹿馬鹿しく描くことで私の夢を達成しようとしています。しかし、jQueryを10分で学んだ後、遅延機能がうまくいかないという問題が発生しました。

だから、私はクラス "luls"で500の黒い小さなdivを持っています。アイデアは、マウスでマウスの上にマウスを置くと、ランダムな色で点灯し、一定時間後に黒色を取り戻すというものです。しかし、彼らはそうではありません。

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); 
    }); 
}); 

mouseoverでもdelay（）とsetTimeoutを使用しようとしましたが、動作しません。君の力が必要。

Answer 1

setTimeoutを使用すると、「これ」はもはや意味を持ちません。あなたはそれを渡す必要があります。

$(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));   
     }); 
    }); 
}); 

Answer 2

私は.eachの使用がここでは必要ではないと思います。また、$(this)を最初にの外にのsetTimeout()と宣言してください - 他にも言及したように、再スコープされます。

//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>

Answer 3

bind 'この' は、下記の例のように、あなたの関数に。

$(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;" />