停止递归setTimeout函数

Question

我正在运行递归setTimeout函数，并且我可以运行多次，它具有clearTimeout，使用此属性，我可以处理如何停止函数运行。 但是我不知道如何在另一个函数中停止它。

var a = 0;
var b = 0;
function Listener(x, y) {
    var lValue = y == true ? a : b;
    if (lValue < 100) {
        console.log(lValue);
        if(y == true){
            a+=x; 
        }else{
            b+=x;
        } 
        setTimeout(Listener.bind(this, x, y), 1000);
    } else {
        clearTimeout(Listener);
        if(y == true){
            a=0; 
        }else{
            b=0;
        } 
    }
}

当我尝试运行两次时，它可以工作：

我的疑问是：如何停止特定正在运行的实例。

Answer 1

几个注意事项：

• 给定1000的恒定超时，您应该改用setInterval() 。 这将大大简化您的功能，并允许您随时取消间隔。
• 使用全局变量会产生代码异味，请创建一个对象来保存对要递增的值的引用。 这样做还可以使您的功能参数更加直观。

这是结合了这两个建议的解决方案：

 function range (step, start = 0, stop = 100) { const state = { value: start, interval: setInterval(callback, 1000) }; function callback () { if (state.value < stop) { console.log(state.value); state.value += step; } else { console.log('timer done'); clearInterval(state.interval); } } callback(); return state; } const timer1 = range(10); const timer2 = range(20); setTimeout(() => { console.log('stopping timer 1'); clearInterval(timer1.interval); }, 2500); setTimeout(() => { console.log('timer 2 value:', timer2.value); }, 3500); 

Answer 2

您可以将计时器提升到其他功能可以访问的更高范围。

 var a = 0; var b = 0; var timer = null; function Listener(x, y) { var lValue = y == true ? a : b; if (lValue < 100) { console.log(lValue); if (y == true) { a += x; } else { b += x; } timer = setTimeout(Listener.bind(this, x, y), 1000); } else { clearTimeout(timer); if (y == true) { a = 0; } else { b = 0; } } } function clearTimer() { if (timer !== null) clearTimeout(timer); } Listener(3, 3); // clear the timer after 3 secnods setTimeout(clearTimer, 3000); 

Answer 3

创建一个变量并将setTimout的引用存储在该变量上，之后，您只需使用该变量引用清除clear

前

全球变量：

var k = setTimeout(() => { alert(1)}, 10000)

clearTimeout(k)





 var a = 0;
    var b = 0;
    var recursiveFunctionTimeout = null;

    function Listener(x, y) {
        var lValue = y == true ? a : b;

        if (lValue < 100) {
            console.log(lValue);
            if(y == true){
                a+=x; 
            }else{
                b+=x;
            } 
            recursiveFunctionTimeout = setTimeout(Listener.bind(this, x, y), 10);
        } else {
            clearTimeout(recursiveFunctionTimeout);

            if(y == true){
                a=0; 
            }else{
                b=0;
            } 
        }
    }

局部变量：

var a = 0;
var b = 0;

function Listener(x, y) {
    var lValue = y == true ? a : b;
    var recursiveFunctionTimeout = null;

    if (lValue < 100) {
        console.log(lValue);
        if(y == true){
            a+=x; 
        }else{
            b+=x;
        } 
        recursiveFunctionTimeout = setTimeout(Listener.bind(this, x, y), 10);
    } else {
        clearTimeout(recursiveFunctionTimeout);

        if(y == true){
            a=0; 
        }else{
            b=0;
        } 
    }
}