一. 原理

  • 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。事件触发后，规定时间内，事件处理函数不能再次被调用。
  • 也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。

image (2).png

二. 应用

  • 拖拽场景：固定时间内只执行一次，防止高频次触发位置变动
  • 缩放场景：监控浏览器resize
  • 滚动

  • 表单重复提交

    三. 手写代码

    1. // 节流：点击计算本次点击与上次点击的时间差是否大于delay，时间差超过delay则执行，否则不执行。
    2. function throttle(fn,delay){
    3.   let pre = 0;
    4.   return function(...args){
    5.       let now = Date.now();
    6.       if(now - pre > delay){
    7.           fn.apply(this, args);
    8.           pre = Date.now();
    9.       }
    10.   }
    11. }

    四. 测试代码

    1. let btn = document.getElementById("btn");
    2. function cl() {
    3.   console.log('节流');
    4. }
    5. btn.addEventListener('click', throttle(cl, 2000));

    image (3).png

    五. 防抖和节流的区别

  • 防抖：只在最后一次事件触发后才会执行一次函数。通过推迟每次事件执行的时间来减少不必要的查询。

  • 节流：保证在一定时间内一定会执行一次最先被触发调用函数。通过控制每次事件执行的时间间隔控制短时间多次执行方法。