待整理：https://www.muyiy.cn/blog/7/7.1.html#引言

一、网站

  • 节流、防抖的可视化比较：http://demo.nimius.net/debounce_throttle/

    节流

    一、事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说，在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。
    1、简单地说，指定时间间隔内只会执行一次任务

| 【示例】节流```javascript function throttle(fn, interval) { let timer, firstTime = true // 是否是第一次执行 return function () { let _this = this if (firstTime) { fn.apply(_this, arguments) // 第一次不需要延迟执行 return firstTime = false } if (timer) { // 如果定时器还在 说明前一次还没有执行完 return false } timer = setTimeout(() => { clearTimeout(timer) timer = null fn.apply(_this, arguments) }, interval || 500); } }

// 不考虑定时器的情况 直接加一个节流阀 function throttle(fn, interval) { let canRun = true //节流阀 return function() { if(!canRun) { return } canRun = false setTimeout(() => { fn.apply(this, arguments) canRun = true }, interval); } }

  1.  |
  2. | --- |
  4. | 【示例】节流```javascript
  5.  * 节流函数 一个函数执行一次后，只有大于设定的执行周期才会执行第二次。有个需要频繁触发的函数，出于优化性能的角度，在规定时间内，只让函数触发的第一次生效，后面的不生效。
  6.  * @param fn要被节流的函数
  7.  * @param delay规定的时间
  8.  */
  9. function throttle(fn, delay) {
  10.     //记录上一次函数触发的时间
  11.     var lastTime = 0;
  12.     return function(){
  13.         //记录当前函数触发的时间
  14.         var nowTime = Date.now();
  15.         if(nowTime - lastTime > delay){
  16.             //修正this指向问题
  17.             fn.call(this);
  18.             //同步执行结束时间
  19.             lastTime = nowTime;
  20.         }
  21.     }
  22. }
  23. document.onscroll = throttle(function () {
  24.     console.log('scllor事件被触发了' + Date.now());
  25. }, 200);

| | —- |

三、使用场景

  • 滚动加载更多
  • 搜索框的联想功能
  • 高频点击
  • 表单重复提交 | 【示例】节流验证：```javascript

window.onresize = throttle(function () { console.log(1) }, 1000) ``` | | —- |

一、防抖和节流我们都是借助 setTimeOut 来实现，不同的地方就是 清除定时器的位置