javascript - 正确理解 javascript 中的 throttle

Question

嗨，我正在尝试理解 javascript 中的 throttle 。 我有这个代码

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); ，throttle 函数似乎没问题(仅调用 function x 一次)

1. 但是为什么 “console.log('请不要着急');”永远不会被调用？

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

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

谢谢

Answer 1

问题出在我的 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);