javascript - 为什么clearTimeout 不适用于此代码？

Question

我在鼠标单击时调用以下代码:

clearTimeouts();
var inMotion = true, x = 0;
var shuffleTimer = setTimeout(function(){inMotion = false}, 3500);
var shuffleStart = setTimeout(oneShuffle, x);

function oneShuffle(){
    x+=5;
    if(inMotion === true){

        console.log('Shuffling again');

        //shuffle again
        shuffleStart = setTimeout(oneShuffle, x);

    } else {

        //increment spins
        spins++;

        //reset spins if loadOrder been exhausted
        spins === loadOrder.length ? spins = 0 : 0;

        console.log(spins);

    }
}

function clearTimeouts(){
   console.log('Clearing timeouts')
   clearTimeout(shuffleTimer);
   clearTimeout(shuffleStart);
}

应该发生的情况是，如果我在 inMotion 为 true 时单击该元素，则两个超时应重置，并且我的 spins 计数器不应增加对于上一次点击。然而，相反发生的情况是，无论如何，旋转都会因之前的超时而增加。为什么？

Answer 1

应该重置哪些计时器？如果您发布的代码位于点击处理程序中，则每次点击都会产生新的计时器。

行:

var shuffleTimer = setTimeout(function(){inMotion = false}, 3500);
var shuffleStart = setTimeout(oneShuffle, x);

每次都会创建新的计时器，因此第一行 (clearTimeouts();) 没有任何意义，因为计时器直到接下来的两行才存在。

您应该将两个计时器放在单击处理程序的范围之外，以便所有单击调用都将引用相同的计时器。此外，所有状态(inMotin、自旋等)都应该存在于函数作用域之外，否则每次单击都会产生新的、不相关的变量。