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的引用存储在该变量上，之后您只需使用该变量引用将clearTimout清除

e.x

全局变量：

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;
        } 
    }
}

停止递归setTimeout函数

3 个答案: