对setTimeout和clearTimeout的困惑

Question

我有一个按钮，可在div滚动时更改div的背景。 背景需要在计时器上进行更改，因此我使用setTimout来执行更改背景的方法。 我认为clearTimeout将取消并且设置了超时，因此我将其放在mouseleave事件上。 但是，它似乎并没有停止超时。 我的逻辑在这里吗？

$("#h2Buzz").mouseenter(function () {   
   setTimeout(playV(), 2700);
   setTimeout(playP(), 5400);
}); 
$("#h2Buzz").mouseleave(function () {
   clearTimeout(playV());
   clearTimeout(playP());
});


function playV() {
    $("#ServicesBackgroundImage2").css("background-image", "url(/images/v.jpg)");
}
function playPn() {

    $("#ServicesBackgroundImage2").css("background-image", "url(/images/p.jpg)");
}

Answer 1

您错误地使用了setTimeout和clearTimeout 。 setTimeout函数返回超时的句柄，该句柄将传递给clearTimeout以停止它。

var playVTimeout;

...

    playVTimeout = setTimeout(playV, 2700);

....

    clearTImeout(playVTimeout);

还要注意setTimeout(playV(), 2700); 将调用playV() 现在和2.7秒后执行它的返回值。 您应该改为传入一个函数对象playV 。

Answer 2

给您的setTimeout分配一个变量，然后将其传递给clearTimeout以清除它，即

var play_timeout = setTimeout("playV()", 2700);
clearTimeout(play_timeout);

（请注意，我在第一个setTimeout参数周围添加了引号）

Answer 3

调用setTimeout ，它将返回一个数字值。 您应该存储该值，因为这是clearTimeout所需要的。 因此，请跟踪两个setTimeout的返回值（它们将有所不同）。 并在可以从两个功能访问的范围内跟踪它们。

快速“ n”脏示例：

var timer = setTimeout( function(){ alert('hi'); }, 300 );
clearTimeout( timer );

另外，您正在使用“ playV（）”调用setTimeout，这是不正确的，因为它将立即以这种方式调用该函数。 您可以将括号放在后面，所以只需setTimeout( playV, 3500 );