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，spins等）都应该存在于函数范围之外，否则每次单击都会产生新的无关变量。

Answer 2

您应该将clearTimeouts（）放在if中，如下所示：

if(inMotion === true){
    clearTimeouts();
    console.log('Shuffling again');

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

}

为什么clearTimeout不能用于此代码？

2 个答案: