节流，就是在一个时间段内只触发一次事件，比如：1秒内只发送一次请求

案例：鼠标移动，div中的文本增加相应的数值

节流：非立即执行版（定时器版本）

  • 效果图

节流非立即执行.gif

  • 代码

    1. <div id="adder">0</div>
    2. <script>
    3. const div = document.getElementById('adder')
    4. // 封装函数,这里可以把num作为参数传入
    5. let divAdd = function (num) {
    6.   div.innerHTML = parseInt(div.innerHTML) + num
    7. }
    8. // 非立即执行版本,定时器版本
    9. const throttle = function (fn, wait, ...arg) {
    10.   let timer = null
    11.   return function () {
    12.     if (!timer) {
    13.       timer = setTimeout(() => {
    14.         fn.apply(this, arg)     // 此处使用箭头函数，this指向调用该节流函数的对象
    15.         timer = null
    16.       }, wait)
    17.     }
    18.   }
    19. }
    20. // 鼠标移动每次加10，每隔2秒加一次
    21. div.onmousemove = throttle(divAdd, 2000, 10)
    22. </script>

    节流：立即执行版本（时间戳版本）

  • 效果图

节流立即执行.gif

  • 代码
    1. <div id="adder">0</div>
    2. <script>
    3. const div = document.getElementById('adder')
    4. // 封装函数,这里可以把num作为参数传入
    5. let divAdd = function (num) {
    6.   div.innerHTML = parseInt(div.innerHTML) + num
    7. }
    8. // 立即执行版本,时间戳版本
    9. const throttle = function (fn, wait, ...arg) {
    10.   let pre = 0    // 初始值
    11.   return function () {
    12.     let now = Date.now()    // 获取当前事件戳
    13.     if (now - pre > wait) {
    14.       fn.apply(this, arg)   // 这里的this也指向，调用节流函数的对象
    15.       pre = now;
    16.     }
    17.   }
    18. }
    19. // 鼠标移动每次加10，每隔2秒加一次
    20. div.onmousemove = throttle(divAdd,2000,10)
    21. </script>

    节流：合并版本

    使用参数来控制是否立即执行

  1. <div id="adder">80</div>
  2. <script>
  3.   const div = document.getElementById('adder')
  4.   const add = function(num){
  5.     div.innerHTML=parseInt(div.innerHTML)+num;
  6.   }
  7.   // 合并版本，使用immediate控制是否立即执行
  8.   const throttle = function (fn, wait, immediate, ...arg) {
  9.     let time = 0
  10.     return function () {
  11.       if (immediate) { // 立即执行
  12.         let now = Date.now()
  13.         if (now - time > wait) {
  14.           fn.apply(this, arg)
  15.           time = now;
  16.         }
  17.       } else {
  18.         if (!time) {  // 非立即执行
  19.           time = setTimeout(() => {
  20.             fn.apply(this, arg)
  21.             time = 0
  22.           }, wait)
  23.         }
  24.       }
  25.     }
  26.   }
  27.   // 鼠标移动每次加10，每隔2秒加一次,不立即执行
  28.   div.onmousemove = throttle(divAdd, 2000,false, 10)
  29. </script>