javascript - 正确理解JavaScript中的 throttle

嗨，我试图了解javascript中的节流。
我有这个代码

function runOnce(fn, ms) {
  if(typeOf(fn) !== "function")
    return;
  ms = ms || 5000;
  var active;
  return (function() {
         	if(active) {
              console.log('no hurry please');
            } else {
              active = setTimeout(fn, ms);
            }
          })();
};

我想测试使用两个不同的函数回调

function x() {
   console.log('timeout from x');
}
function y() {
    console.log('timeout from y');
}

现在这是我的问题：
多次调用runOnce(x);runOnce(x);runOnce(x);，节流功能似乎正常（仅调用一次功能x）


但是为什么
“ console.log（'不要急着请'）；”永远不会被调用？


当我调用runOnce(x);runOnce(x);runOnce(y);runOnce(y);时，函数x和y仅被调用1次，这很好。


但是为什么我调用runOnce(x);runOnce(y);runOnce(x);runOnce(y);时，函数x和y都被调用2次？


谢谢

最佳答案

问题出在我的runOnce代码中。
如果我将var active移到函数之外，则可以解决（感谢@Andreas提供的链接）。并修复一下功能。以下完整的代码工作：

var active, fnArray = [];

function runOnce(fn, ms) {
  if (typeof(fn) !== "function")
    return;
  ms = ms || 5000;
  return (function() {
    if (active && fnArray.indexOf(fn.name) >= 0) {
      console.log('no hurry please');
    } else {
      fnArray.push(fn.name);
      active = setTimeout(function() {
        fnArray = fnArray.filter(function(elm) {
          elm !== fn.name
        });
        fn();
      }, ms);
    }
  })();
};

function x() {
  document.body.innerHTML += 'timeout from x </br>';
}

function y() {
  document.body.innerHTML += 'timeout from y </br>';
}
runOnce(x);
runOnce(x);
runOnce(x);
runOnce(y);
runOnce(x);
runOnce(y);

关于javascript - 正确理解JavaScript中的 throttle ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40486867/