Question

所以我有这样的功能：

function blabla(){
    ...

    setTimeout(() => {
        //do some stuff
    }, 10000) 
}

现在如果调用了函数并且尚未完成超时，如何重置超时时间（10000）？
我试图消除超时，如果它确实像这样存在：

function blabla(){
    ...

    if(to){
       clearTimeout(to)
    } 

    let to = setTimeout(() => {
        //do some stuff
    }, 10000) 
}

但是我收到错误消息to未定义。那么检查超时是否存在的正确方法是什么。有更好的方法吗？

Answer 1

您只需要在to之前声明if，以便在if运行时它存在（并且没有未定义）。直到稍后，您不必提供实际值。

实际上，您可能想在函数外部声明它，因此它将在下次调用该函数时保持不变。

这是一个可运行的演示。请注意，尽管两次调用blablah（），但您只会看到一次“ hello”，因为对函数的第二次调用取消了原始超时。

var to;

function blabla() {
  //...

  if (to) {
    clearTimeout(to)
  }

  to = setTimeout(() => {
    //do some stuff
    console.log("hello");
  }, 10000)
}

blabla();
blabla();

Answer 2

不要使用let，let的作用域在功能块内部。如果您第二次调用该函数，则该函数没有定义。使用var，以便在整个函数调用中均可访问。

Answer 3

最好不要使用全局变量，因为它不可重用。该函数的写包装更好，因为它是通用模式。此本地代码或为此使用npm数据包

防反跳功能包含在许多JavaScript库中。目标每个实现的背后是通过防止从连续调用多次起功能。不管库中，所有的反跳功能都是基于JavaScript的本机构建的 setTimeout函数。

https://www.npmjs.com/package/debounce：

function debounce(func, wait, immediate) {
    let timeout;
    return function() {
        let context = this,
            args = arguments;
        let later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var blabla = debounce(function(){
     console.log(5)
}, 5000);
blabla()
blabla()

重置超时的正确方法是什么？

3 个答案: