javascript - 在 javascript 中 2 秒内使用函数不超过 1 次

Question

我有一个从鼠标滚轮滚动开始的函数，但是如果我滚动更长的时间，它会执行 2-3 次。所以我必须找到一种方法来阻止它在 2 秒内被调用超过 1 次的情况下运行。有什么想法吗？

PS:这是我的职责。如果您知道更好的方法来启动滚动而不考虑滚动的长度，我也会很感激。

if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
window.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8

var s = 0;
function MouseWheelHandler(e) {

// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));     
e.preventDefault();
                ...
 }

更新:我根据我在评论和答案中读到的想法制定了自己的代码版本。就是这样:

function MouseWheelHandler(e) {
var e = window.event || e;   

// cross-browser wheel delta
 // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));     
 e.preventDefault();
GoUpDown(delta,e);

}
function GoUpDown(delta,e) {
                        if(timer ==0){ timer =1;
                            setTimeout(function () {timer =0;},4200);
  /*function stuff*/
}

Answer 1

这是一个简单的节流函数。它返回一个新函数，该函数仅允许传入的函数以指定的间隔(以毫秒为单位)运行。

function throttleFunction(func, interval){
    return function(){
        if(!func.lastRunTime || func.lastRunTime < Date.now() - interval){
            func.lastRunTime = Date.now();

            func.apply(this, arguments);
        }
    }
}

将其添加到您的代码中，如下所示:

//Only run every 2000 milliseconds
var throttledMouseWheelHandler = throttleFunction(MouseWheelHandler, 2000);
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", throttledMouseWheelHandler , false);
// Firefox
window.addEventListener("DOMMouseScroll", throttledMouseWheelHandler , false);

function throttleFunction(func, interval) {
  return function() {
    if (!func.lastRunTime || func.lastRunTime < Date.now() - interval) {
      func.lastRunTime = Date.now();

      func.apply(arguments);
    }
  }
}

document.body.onclick = throttleFunction(function() {
  var div = document.createElement('div');
  div.innerHTML = 'clicked';
  document.body.appendChild(div);
}, 2000);

<div>Click ME (only registers every 2 seconds)</div>