var COUNT = 0; function testFn() { console.log(COUNT++); } // 浏览器resize的时候 // 1. 清除之前的计时器 // 2. 添加一个计时器让真正的函数testFn延后100毫秒触发 window.onresize = function () { var timer = null; clearTimeout(timer); timer = setTimeout(function() { testFn(); }, 100); }; 

 var timer = null; window.onresize = function () { clearTimeout(timer); timer = setTimeout(function() { testFn(); }, 100); }; 

 / * 函数节流方法 * @param Function fn 延时调用函数 * @param Number delay 延迟多长时间 * @return Function 延迟执行的方法 */ var throttle = function (fn, delay) { var timer = null; return function () { clearTimeout(timer); timer = setTimeout(function() { fn(); }, delay); } }; window.onresize = throttle(testFn, 200, 1000); 

 var throttle = function (fn, delay) { var timer = null; return function () { clearTimeout(timer); timer = setTimeout(function() { fn(); }, delay); } }; var f = throttle(testFn, 200); window.onresize = function () { f(); };

现在看起来这个方法已经接近完美了，然而实际使用中并非如此。举个例子：

下面的代码里面需要指出的是：
1.previous 变量的作用和 timer 类似，都是记录上一次的标识，必须是相对的全局变量
2.如果逻辑流程走的是“至少触发一次”的逻辑，那么函数调用完成需要把 previous 重置成当前时间，简单来说就是：相对于下一次的上一次其实就是当前 

 / * 函数节流方法 * @param Function fn 延时调用函数 * @param Number delay 延迟多长时间 * @param Number atleast 至少多长时间触发一次 * @return Function 延迟执行的方法 */ var throttle = function (fn, delay, atleast) { var timer = null; var previous = null; return function () { var now = +new Date(); if ( !previous ) previous = now; if ( now - previous > atleast ) { fn(); // 重置上一次开始时间为本次结束时间 previous = now; } else { clearTimeout(timer); timer = setTimeout(function() { fn(); }, delay); } } };

实践：
我们模拟一个窗口 scroll 时节流的场景，也就是说当用户滚动页面向下的时候我们需要节流执行一些方法，比如：计算 DOM 位置等需要连续操作 DOM 元素的动作
完整代码如下：

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>throttle</title>
</head>
<body>
 <div style="height:5000px">
  <div id="demo" style="position:fixed;"></div>
 </div>
 <script>
 var COUNT = 0, demo = document.getElementById('demo');
 function testFn() {demo.innerHTML += 'testFN 被调用了 ' + ++COUNT + '次<br>';}

 var throttle = function (fn, delay, atleast) {
  var timer = null;
  var previous = null;

  return function () {
   var now = +new Date();

   if ( !previous ) previous = now;
   if ( atleast && now - previous > atleast ) {
    fn();
    // 重置上一次开始时间为本次结束时间
    previous = now;
    clearTimeout(timer);
   } else {
    clearTimeout(timer);
    timer = setTimeout(function() {
     fn();
     previous = null;
    }, delay);
   }
  }
 };
 window.onscroll = throttle(testFn, 200);
 // window.onscroll = throttle(testFn, 500, 1000);
 </script>
</body>
</html> 



 // case 1 window.onscroll = throttle(testFn, 200); // case 2 window.onscroll = throttle(testFn, 200, 500);

case 1 的表现为：在页面滚动的过程（不能停止）中 testFN 不会被调用，直到停止的时候会调用一次，也就是说执行的是 throttle 里面 最后 一个 setTimeout ，效果如图（查看原 gif 图）：


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本网站。

您可能感兴趣的文章:

  • javascript函数的节流[throttle]与防抖[debounce]
  • JavaScript中定时控制Throttle、Debounce和Immediate详解
  • JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）
  • 详解JavaScript节流函数中的Throttle
  • javascript中的throttle和debounce浅析
  • Javascript Throttle & Debounce应用介绍
  • Javascript节流函数throttle和防抖函数debounce