jQuery setTimeout /延遲循環+鼠標中心

-1

我試圖實現我的夢想，在繪製無用的廢話。但是在10分鐘內學習jQuery之後，我遇到了延遲函數無法正常工作的問題。jQuery setTimeout /延遲循環+鼠標中心

所以，我有500個黑色小divs與類「luls」。這個想法是，當你用鼠標懸停在它們上面時，它們以隨機顏色點亮，並在一段時間後取回黑色。但他們不是。

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

我試過使用delay（）和setTimeout，甚至是mouseover，但它不起作用。需要你的幫助。

來源

2017-07-03 taymasoff

我認爲setTimeout的重新綁定 '本' 的窗口。所以在setTimeout中調用$（this）可能會給你帶來意想不到的結果。 –

另外，您正在'mouseenter'回調之外調用'setTimeout' - 即。在最初的負載。 –

嘗試將set timeout設置在每個回調中 – Volem

當您使用setTimeout時，「this」不再是您的意思。你需要將它傳遞：

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

來源

2017-07-03 19:40:27 Sveta

我不認爲你的.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>

來源

2017-07-03 19:42:18 Santi

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

來源

2017-07-03 19:43:22

jQuery setTimeout /延遲循環+鼠標中心

回答

相關問題