时间戳

首页 > 技术文章 > js--防抖与节流的使用

js--防抖与节流的使用

zaishiyu 2022-04-29 15:32 原文

 

前言

　　防抖与节流是最常用的高频触发优化的方式，比如在开发中防止重复提交、在下拉加载更多的时候防止重复请求等问题。文本来总结下防抖与节流的区别及使用。

正文

　　1、防抖

　　防抖 (debounce): 将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户输入，只需再输入完成后做一次输入校验即可。

　　实现代码如下：

     /*
       防抖函数，执行函数被连续调用时，空闲的时间必须大于等于时间间隔wait ,func 才会执行
        func 表示回调函数
        wait  表示时间间隔
        immediate 表示是否立即执行
      */
      function debounce(func, wait, immediate) {
        let timer = null // 定时器
        let result = null
        return function (...params) {
          let context = this,
            now = immediate && !timer;
          // 在设置新的定时器之前要把之前的定时器销毁，只需要在一定的时间间隔wait中执行一次
          clearTimeout(timer)
          timer = setTimeout(() => {
            timer = null
            if (!immediate) {
              result = func.apply(context, params)
            }
          }, wait);
          if (now) {
            result = func.apply(context, params)
          }
          return result
        }
      }

　　2、节流

　　节流(throttle): 每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景: 滚动条事件 或者 resize 事件，通常每隔 100~500 ms执行一次即可。

　　实现代码如下：

      /*
      节流函数是为了减小执行频率，当达到一定的时间间隔就会执行一次
      func 表示需要执行的函数
      wait 表示设置的时间间隔
      */
      function throttle(func, wait) {
        let timer = null // 定时器
        let result = null
        let previous = 0 // 之前的时间戳
        return function (...params) {
          let now = new Data()
          let context = this
          // remaining 用于判断上次执行到本次执行的时间间隔是否超过了设置的时间间隔
          let remaining = wait - (now - previous)
          if (remaining <= 0) {
            // remaining <= 0 表示上次至此与本次的时间间隔已经超过了设置的时间间隔，
            // 可以执行回调了，并重置定时器 ，重新缓存本次的执行时间戳
            clearTimeout(timer)
            previous = now
            timer = null
            result = func.apply(context, params)
          } else if (!timer) {
            // 如果设置的时间间隔，且定时器为空，则等待剩余的间隔
            timer = setTimeout(() => {
              previous = now;
              timer = null;
              result = func.apply(context, params)
            }, remaining);
          }
          return result
        }
      }

　　3、区别

　　防抖和节流的作用都是防止函数多次调用，区别在于假设用户一直触发这个函数，且每次触发的时间间隔小于 wait ,防抖情况下只会调用一次，而节流是每隔一定的时间间隔 wait 调用函数。防抖和节流本质不同，防抖是多次触发事件，多次执行变为最后一次执行，节流是将多次触发编程每隔一段时间执行。

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

 

推荐阅读