防抖和节流（附带promise版）

最新推荐文章于 2024-04-07 15:57:31 发布
最新推荐文章于 2024-04-07 15:57:31 发布
阅读量1.4k 收藏 4
点赞数
文章标签： vue html js ajax 前端
原文链接：https://www.cnblogs.com/qingheshiguang/p/16007319.html
版权

一、防抖函数（ debounce ）

简单的理解就是：延迟执行
1.用一副图来理解一下它的过程：
①当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
②当事件密集触发时，函数的触发会被频繁的推迟；
③只有等待了一段时间也没有事件触发，才会真正的执行响应函数；
在这里插入图片描述
2.防抖的应用场景：
①输入框中频繁的输入内容，搜索或者提交信息；
②频繁的点击按钮，触发某个事件；
③监听浏览器滚动事件，完成某些特定操作；
④用户缩放浏览器的resize事件；

3.第三方库实现防抖
目前防抖节流的第三方库有 lodash 、underscore
这里使用underscore，我们可以理解成lodash是underscore的升级版，它更重量级，功能也更多；但是目前underscore还在维护，lodash已经很久没有更新了；
Underscore的安装有很多种方式：
① 下载Underscore，本地引入；
② 通过CDN直接引入；
③ 通过包管理工具（npm）管理安装；

4.简单案例：
输入框中输入内容实现防抖，代码如下

<script>
   //需要先安装和引入Underscore
    1.获取输入框
    const inputEl = document.querySelector("input")
    let counter = 0
    2.触发的事件
    const inputChange = function(event) {
      console.log(`发送了第${++counter}次网络请求`, this, event)
    }
    // 防抖处理，停止输入2s后触发事件
    inputEl.oninput = _.debounce(inputChange, 2000)
</script>

5.手写防抖函数
①基本实现

function debounce(fn, delay) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null

  // 2.真正执行的函数
  const _debounce = function() {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)
    // 延迟执行
    timer = setTimeout(() => {
      // 外部传入的真正要执行的函数
      fn()
    }, delay)
  }

  return _debounce
}

②事件函数有参数,需要改变this指向

function debounce(fn, delay) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null

  // 2.真正执行的函数
  const _debounce = function(...args) {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)
    // 延迟执行
    timer = setTimeout(() => {
      // 外部传入的真正要执行的函数
      fn.apply(this, args)
    }, delay)
  }

  return _debounce
}

③增加立即执行的功能，第一次输入先触发一次事件

function debounce(fn, delay, immediate = false) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null
  let isInvoke = false //是否执行过

  // 2.真正执行的函数
  const _debounce = function(...args) {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)

    // 判断是否需要立即执行
    if (immediate && !isInvoke) {
      fn.apply(this, args)
      isInvoke = true
    } else {
      // 延迟执行
      timer = setTimeout(() => {
        // 外部传入的真正要执行的函数
        fn.apply(this, args)
        isInvoke = false
      }, delay)
    }
  }

  return _debounce
}

④增加取消功能，取消要执行的事件

function debounce(fn, delay, immediate = false) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null
  let isInvoke = false

  // 2.真正执行的函数
  const _debounce = function(...args) {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)

    // 判断是否需要立即执行
    if (immediate && !isInvoke) {
      fn.apply(this, args)
      isInvoke = true
    } else {
      // 延迟执行
      timer = setTimeout(() => {
        // 外部传入的真正要执行的函数
        fn.apply(this, args)
        isInvoke = false
        timer = null
      }, delay)
    }
  }

  // 封装取消功能
  _debounce.cancel = function() {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }

  return _debounce
}

调用取消功能：

 const cancelBtn = document.querySelector("#cancel")
 cancelBtn.onclick = function() {
      debounceChange.cancel()
    }

⑤事件有返回值

function debounce(fn, delay, immediate = false, resultCallback) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null
  let isInvoke = false

  // 2.真正执行的函数
  const _debounce = function(...args) {
    return new Promise((resolve, reject) => {
      // 取消上一次的定时器
      if (timer) clearTimeout(timer)

      // 判断是否需要立即执行
      if (immediate && !isInvoke) {
        const result = fn.apply(this, args)
        if (resultCallback) resultCallback(result)
        resolve(result)
        isInvoke = true
      } else {
        // 延迟执行
        timer = setTimeout(() => {
          // 外部传入的真正要执行的函数
          const result = fn.apply(this, args)
          if (resultCallback) resultCallback(result)
          resolve(result)
          isInvoke = false
          timer = null
        }, delay)
      }
    })
  }

  // 封装取消功能
  _debounce.cancel = function() {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }

  return _debounce
}

调用有返回值：

    const debounceChange = debounce(inputChange, 3000, false, (res) => {
      console.log("拿到真正执行函数的返回值:", res)
    })
    const tempCallback = () => {
      debounceChange().then(res => {
        console.log("Promise的返回值结果:", res)
      })
    }
  inputEl.oninput = tempCallback

二、节流函数（ throttle ）

简单的理解就是减少事件的触发频率
1.用一副图来理解一下它的过程：
①当事件触发时，会执行这个事件的响应函数；
②如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
③不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；
在这里插入图片描述
2.节流的应用场景：
① 监听页面的滚动事件；
② 鼠标移动事件；
③ 用户频繁点击按钮操作；
④ 游戏中的一些设计；

3.第三方库实现防抖
目前防抖节流的第三方库有 lodash 、underscore

4.简单案例：
点击按钮不断触发事件，实现节流，代码如下

<script>
    //首先需要安装和导入第三方库
    const inputEl = document.querySelector("input")
    let counter = 0
    const inputChange = function(event) {
      console.log(`发送了第${++counter}次网络请求`, this, event)
    }
   inputEl.oninput = _.throttle(inputChange, 2000) //2s内只能触发一次事件
</script>

5.手写节流函数
①基本实现

function throttle(fn, interval, options) {
  // 1.记录上一次的开始时间
  let lastTime = 0

  // 2.事件触发时, 真正执行的函数
  const _throttle = function() {

    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()

    // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      // 2.3.真正触发函数
      fn()
      // 2.4.保留上次触发的时间
      lastTime = nowTime
    }
  }

  return _throttle
}

②增加开头和结尾执行是否执行事件

function throttle(fn, interval, options = { leading: true, trailing: false }) {
  // 1.记录上一次的开始时间
  const { leading, trailing } = options
  let lastTime = 0
  let timer = null

  // 2.事件触发时, 真正执行的函数
  const _throttle = function() {

    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()
    if (!lastTime && !leading) lastTime = nowTime

    // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }

      // 2.3.真正触发函数
      fn()
      // 2.4.保留上次触发的时间
      lastTime = nowTime
      return
    }

    if (trailing && !timer) {
      timer = setTimeout(() => {
        timer = null
        lastTime = !leading ? 0: new Date().getTime()
        fn()
      }, remainTime)
    }
  }

  return _throttle
}

③this指向和参数

function throttle(fn, interval, options = { leading: true, trailing: false }) {
  // 1.记录上一次的开始时间
  const { leading, trailing } = options
  let lastTime = 0
  let timer = null

  // 2.事件触发时, 真正执行的函数
  const _throttle = function(...args) {

    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()
    if (!lastTime && !leading) lastTime = nowTime

    // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }

      // 2.3.真正触发函数
      fn.apply(this, args)
      // 2.4.保留上次触发的时间
      lastTime = nowTime
      return
    }

    if (trailing && !timer) {
      timer = setTimeout(() => {
        timer = null
        lastTime = !leading ? 0: new Date().getTime()
        fn.apply(this, args)
      }, remainTime)
    }
  }

  return _throttle
}

④增加取消功能，取消要执行的事件

function throttle(fn, interval, options = { leading: true, trailing: false }) {
  // 1.记录上一次的开始时间
  const { leading, trailing } = options
  let lastTime = 0
  let timer = null

  // 2.事件触发时, 真正执行的函数
  const _throttle = function(...args) {

    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()
    if (!lastTime && !leading) lastTime = nowTime

    // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }

      // 2.3.真正触发函数
      fn.apply(this, args)
      // 2.4.保留上次触发的时间
      lastTime = nowTime
      return
    }

    if (trailing && !timer) {
      timer = setTimeout(() => {
        timer = null
        lastTime = !leading ? 0: new Date().getTime()
        fn.apply(this, args)
      }, remainTime)
    }
  }

  _throttle.cancel = function() {
    if(timer) clearTimeout(timer)
    timer = null
    lastTime = 0
  }

  return _throttle
}

⑤事件有返回值

function throttle(fn, interval, options = { leading: true, trailing: false }) {
  // 1.记录上一次的开始时间
  const { leading, trailing, resultCallback } = options
  let lastTime = 0
  let timer = null

  // 2.事件触发时, 真正执行的函数
  const _throttle = function(...args) {
    return new Promise((resolve, reject) => {
      // 2.1.获取当前事件触发时的时间
      const nowTime = new Date().getTime()
      if (!lastTime && !leading) lastTime = nowTime

      // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
      const remainTime = interval - (nowTime - lastTime)
      if (remainTime <= 0) {
        if (timer) {
          clearTimeout(timer)
          timer = null
        }

        // 2.3.真正触发函数
        const result = fn.apply(this, args)
        if (resultCallback) resultCallback(result)
        resolve(result)
        // 2.4.保留上次触发的时间
        lastTime = nowTime
        return
      }

      if (trailing && !timer) {
        timer = setTimeout(() => {
          timer = null
          lastTime = !leading ? 0: new Date().getTime()
          const result = fn.apply(this, args)
          if (resultCallback) resultCallback(result)
          resolve(result)
        }, remainTime)
      }
    })
  }

  _throttle.cancel = function() {
    if(timer) clearTimeout(timer)
    timer = null
    lastTime = 0
  }

  return _throttle
}

调用：

    const _throttle = throttle(inputChange, 3000, { 
      leading: false, 
      trailing: true,
      resultCallback: function(res) {
        console.log("resultCallback:", res)
      }
     })
    const tempCallback = (...args) => {
      _throttle.apply(inputEl, args).then(res => {
        console.log("Promise:", res)
      })
    }
    inputEl.oninput = tempCallback

转载https://www.cnblogs.com/qingheshiguang/p/16007319.html 清和时光

大白兔奶糖a
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
debounce-promise:创建 Promise 返回函数的去抖动版本
08-05
去抖动承诺 创建 Promise 返回函数的去抖动版本 安装 npm i -S debounce-promise 使用示例 var debounce = require ( 'debounce-promise' ) function expensiveOperation ( value ) { return Promise . resolve ( value ) } var saveCycles = debounce ( expensiveOperation , 100 ) ; [ 1 , 2 , 3 , 4 ] . forEach ( num => { return saveCycles ( 'call no #' + num ) . then ( value => { console . log ( value ) } ) } ) // Will only c
debounce实现 js_javascript – 使用promises实现的Debounce功能
weixin_39821605的博客
12-22 234
我找到了一个更好的方法来实现承诺：function debounce(inner, ms = 0) {let timer = null;let resolves = [];return function (...args) {// Run the function after a certain amount of timeclearTimeout(timer);timer = setTimeou...
javaScript手写专题——防抖/节流/闭包/Promise/深浅拷贝
最新发布
三月和九月的博客
04-07 983
本文介绍了面试中常见的手写JS场景题目：如手写防抖、节流；手写Promise封装、手写深拷贝浅拷。手写深拷贝需要考虑很多细节，需要根据具体情况来进行处理。在前面的实现中，我们已经考虑了一些常见的情况，但是还有很多其他的情况需要考虑。在手写深拷贝时，需要考虑以下几种场景：特殊的对象：正则表达式、日期对象、Error 对象，使用构造函数创建新的对象Fuction对象：对象可能会有函数属性，例如构造函数或方法，这种情况下需要将函数原样复制过来，而不是执行函数。特殊类型：symbol迭代复制：Map
js 防抖节流，同步异步，promise
致我逝去的青春的博客
01-12 1783
防抖 防抖 指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 //非立即执行 let box = document.getElementById('box') let num = 1; function add() { box.innerHTML = num++ ...
js基础(3)~es6新特性，promise。跨域，函数防抖、节流，js伪数组
dugujiuding的博客
11-21 969
目录1，es6新特性1.1，let1.2，const1.3，字符串模板1.4，解构赋值1.4.1，对象解构赋值1.4.2，数组解构赋值1.4.3，函数参数解构赋值1.5，Symbol1.6， 箭头函数1.7，for of1.8，class类1.9，导入导出1.10，Promise1.11，async/await2，promise2.1，promise对象的.then方法2.2，promise对象的.catch方法2.3，promise.all方法3，跨域3.1，实现跨域请求的3种方式4，函数防抖和函数节流4
js去抖和节流函数详解
vcxiaohan的博客
07-31 1912
$(() =&amp;amp;amp;amp;amp;amp;amp;amp;gt; { // 举例：window scroll事件 /* 如果一直滚动下去，在经过3s后一定会执行一次move函数(函数节流)，如果停止滚动，在经过1s后会执行一次move函数(函数去抖)，用来控制会频繁执行的函数，优化dom操作，防止浏览器执行过多，出现卡死现象 */ $(window).on('scroll', () =&amp;amp;amp;amp;amp;am
vue中使用防抖和节流
01-24
vue项目中防抖和节流的指令 在mian.js中use就可以全局使用了
防抖和节流Throttle and debounce.html
05-17
防抖和节流
js防抖和节流的深入讲解
10-17
主要给大家介绍了关于js防抖和节流的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JS防抖和节流实例解析
10-16
主要介绍了JS防抖和节流实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
浅析JavaScript 函数防抖和节流
10-15
主要介绍了JavaScript 函数防抖和节流的相关资料，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
promise-throttle:节流阀承诺被执行，即一次允许不超过10个
05-18
诺言节气门 节流诺言一次要n并发诺言。 用法 // run 10 promises at a time var throttle = require ( 'promise-throttle' ) ( 10 ) ; var request = require ( 'request' ) ; var urls = [ ... ] ; var promises = urls . map ( function ( url ) { return throttle ( function ( resolve , reject ) { request ( url , function ( error , res , body ) { if ( error ) { return reject ( error ) ; } if ( res .
防抖Debounce实现
wwwqiaoling的博客
03-18 237
防抖是属于体验优化的一个手段，咱们来看下一个具体的情景，在输入框中输入信息，然后触发change事件，如果一直输入，那就回一致触发这个事件，体验就不太友好，如果等用户输入暂停的时候再触发就好很多了。 对于上面的问题，咱们可以先设置一个定时器，输入暂停后，并且到了定时的时间再触发change事件。 页面元素比较简单，就不写了，直接写逻辑代码吧！废话不多说，直接上代码！ // 首先获取目标元素 c...
使用promise实现节流
qq_31695715的博客
09-14 161
【代码】使用promise实现节流。
防抖和节流函数的实现
qq_39908328的博客
04-13 9558
防抖和节流函数的实现 首先我们需要对防抖和节流函数作一个概念的区别：因为这两者是不同的一个概念 一、防抖和节流函数的基本认识 1.防抖函数 防抖函数相当于是对触发的数据做一个延迟处理。比如我们平时在使用搜索框时，我们一输入内容就会发送对应的网络请求，如果我们后面一直有在输入内容，那么就会一直发送网络请求。正确的做法应该是在我们输入期间不发送网络请求，当我们输入完成后在发送网络请求。 2.节流函数 节流函数相当于是我们在一个时间段内一直频繁的触发数据请求，但是数据的请求还是根据设定的一个频率来进行响应的。比
闭包，防抖动，节流，Promise，宏任务，微任务、async 、await
qq_49464663的博客
08-18 296
闭包，防抖动，节流，Promise，宏任务，微任务、async 、await
(手写js) 函数防抖|节流实现、Promise实现、Ajax实现
sinat_39394862的博客
05-01 2509
js手写函数节流防抖、promise、Ajax等方法
【JS】一些手写函数：深拷贝、bind、debounce等
Greenary的博客
02-27 519
深拷贝： 前提知识：typeof ，==，值类型和引用类型，instanceof，for...in遍历，hasOwnProperty typeof 1 'number' typeof 1.2 'number' typeof 'ss' 'string' typeof null 'object' typeof undefined 'undefined' typeof [] 'object' typeof {} 'object' typeof true 'boolean' typeof Symbol 'fu
axios防抖和节流
09-10
axios本身并不提供防抖和节流的功能，它是一个用于发起HTTP请求的库。防抖和节流是一种对事件处理函数进行优化的技术，可以用于限制函数的触发频率。在给定的时间间隔内，防抖只会执行最后一次触发的事件处理函数，而节流则会按照一定的时间间隔有规律地执行事件处理函数。这两种技术可以用于优化一些频繁触发的事件，如mousemove、scroll、resize、input等。 在你提供的引用中，第一个引用解释了防抖和节流的区别，第二个引用提到了一些使用防抖的场景，比如在window.onresize事件回调中触发echarts实例的重绘，或者在input标签的input事件中请求后端接口。但需要注意的是，这里提到的防抖并不是axios本身提供的功能，而是在使用axios发起请求时，可以结合防抖技术来控制请求的触发频率。 因此，在使用axios时，如果需要实现防抖或节流的功能，可以参考第二个引用中提到的场景，使用防抖或节流的方法来控制请求的触发频率，从而达到优化的效果。另外，第三个引用提到了在Vue中引入axios并将其加入Vue的原型中的方法，这是为了在Vue组件中方便地使用axios进行HTTP请求，与防抖或节流相关，只是为了提供一个便捷的请求方式，并不直接涉及防抖或节流的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值