防抖与节流(详解)

于 2023-06-10 16:45:43 发布
阅读量81 收藏
点赞数
分类专栏： Js高级 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51644864/article/details/131139094
版权

防抖

我们可以通过一幅图来认识这个过程
在这里插入图片描述

  • 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
  • 当事件密集触发时，函数的触发会被频繁的推迟；
  • 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

应用场景

  • 搜索框输入数据，触发事件
  • 频繁的点击按钮
  • 监听屏幕滚动事件
  • 用户窗口的resize事件

防抖的意义：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

undercore实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<button>按钮</button>

<input type="text">

<!-- CDN引入: 网络的js文件 -->
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.4/underscore-umd-min.js"></script>
<!-- 本地引入: 下载js文件, 并且本地引入 -->
<!-- <script src="./js/underscore.js"></script> -->
<script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

    // 2.监听input元素的输入
    // let counter = 1
    // inputEl.oninput = function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }

    // 3.防抖处理代码
    let counter = 1
    inputEl.oninput = _.debounce(function() {
        console.log(`发送网络请求${counter++}:`, this.value)
    }, 3000)

</script>

</body>
</html>

防抖基本功能实现：可以实现防抖效果

优化一：优化参数和this指向
优化二：优化取消操作（增加取消功能）
优化三：优化立即执行效果（第一次立即执行）
优化四：优化返回值

基本实现：

const hyDebounce = function (fn,delay){
        //1.第一次触发的timer
        let timer = null
        //2.触发执行后的函数
        const _debounce = function(...args){
            //如果再次触发，取消上一次的事件
            if (timer) clearTimeout(timer)
            //延迟执行对应的回调函数
            timer = setTimeout(()=>{
                fn()
                //执行完函数后timer置为null
                timer = null
            },delay)
        }
        //返回函数（闭包）
        return _debounce
    }

this优化

function hydebounce(fn, delay) {
  // 1.用于记录上一次事件触发的timer
  let timer = null

  // 2.触发事件时执行的函数
  const _debounce = function(...args) {
    // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
    if (timer) clearTimeout(timer)

    // 2.2.延迟去执行对应的fn函数(传入的回调函数)
    timer = setTimeout(() => {
      fn.apply(this, args)
      timer = null // 执行过函数之后, 将timer重新置null
    }, delay);
  }

  // 返回一个新的函数
  return _debounce
}

取消功能

    const hyDebounce = function (fn,delay){
        //1.第一次触发的timer
        let timer = null
        //2.触发执行后的函数
        const _debounce = function(...args){
            //如果再次触发，取消上一次的事件
            if (timer) clearTimeout(timer)
            //延迟执行对应的回调函数
            timer = setTimeout(()=>{
                //绑定this
                fn.apply(this,args)
                //执行完函数后timer置为null
                timer = null
            },delay)
        }

        //取消函数
        _debounce.cancel = function (){
            if(timer) clearTimeout(timer)
            timer = null
        }
        //返回函数（闭包）
        return _debounce
    }

立即执行功能

  // 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态
    const hyDebounce = function (fn,delay,immediate = true){
        //1.第一次触发的timer
        let timer = null
        let isInvoke = false

        //2.触发执行后的函数
        const _debounce = function(...args){
            //如果再次触发，取消上一次的事件
            if (timer) clearTimeout(timer)
            //第一次是否不需要延迟
            if(immediate && !isInvoke){
                fn.apply(this,args)
                isInvoke = true
                return
            }
            //延迟执行对应的回调函数
            timer = setTimeout(()=>{
                //绑定this
                fn.apply(this,args)
                //执行完函数后timer置为null
                timer = null
                isInvoke = false
            },delay)
        }

        //取消函数
        _debounce.cancel = function (){
            if(timer) clearTimeout(timer)
            timer = null
            isInvoke = false
        }
        //返回函数（闭包）
        return _debounce

获取返回值

   const hyDebounce = function (fn,delay,immediate = true){
        //1.第一次触发的timer
        let timer = null
        let isInvoke = false

        //2.触发执行后的函数
        const _debounce = function(...args){
          return new Promise((resolve,reject)=>{
              try {
                  //如果再次触发，取消上一次的事件
                  if (timer) clearTimeout(timer)
                  let res = undefined //返回值
                  //第一次是否不需要延迟
                  if(immediate && !isInvoke){
                      res = fn.apply(this,args)
                      resolve(res)
                      isInvoke = true
                      return
                  }
                  //延迟执行对应的回调函数
                  timer = setTimeout(()=>{
                      //绑定this
                      res = fn.apply(this,args)
                      resolve(res)
                      //执行完函数后timer置为null
                      timer = null
                      isInvoke = false
                  },delay)
              }catch (err){
                  reject(err)
              }
          })
        }

        //取消函数
        _debounce.cancel = function (){
            if(timer) clearTimeout(timer)
            timer = null
            isInvoke = false
        }
        //返回函数（闭包）
        return _debounce
    }

封装独立文件


// 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态
function hydebounce(fn, delay, immediate = false, resultCallback) {
  // 1.用于记录上一次事件触发的timer
  let timer = null
  let isInvoke = false

  // 2.触发事件时执行的函数
  const _debounce = function(...args) {
    return new Promise((resolve, reject) => {
      try {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 第一次操作是不需要延迟
        let res = undefined
        if (immediate && !isInvoke) {
          res = fn.apply(this, args)
          if (resultCallback) resultCallback(res)
          resolve(res)
          isInvoke = true
          return
        }

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
          res = fn.apply(this, args)
          if (resultCallback) resultCallback(res)
          resolve(res)
          timer = null // 执行过函数之后, 将timer重新置null
          isInvoke = false
        }, delay);
      } catch (error) {
        reject(error)
      }
    })
  }

  // 3.给_debounce绑定一个取消的函数
  _debounce.cancel = function() {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }

  // 返回一个新的函数
  return _debounce
}

节流

我们可以通过一幅图来认识这个过程
在这里插入图片描述
节流的应用场景：
➢ 监听页面的滚动事件；
➢ 鼠标移动事件；
➢ 用户频繁点击按钮操作；
➢ 游戏中的一些设计

我们按照如下思路来实现：

 节流函数的基本实现：可以实现节流效果
 优化一：节流最后一次也可以执行
 优化二：优化添加取消功能
 优化三：优化返回值问题

基本实现

function myThrottle(fn,interval){
    let startTime = 0
    return _throttle = function (){
        let nowTime = new Date().getTime()
        let waitTime = interval - (nowTime - startTime)
        if(waitTime <= 0){
            fn()
            startTime = nowTime
        }
    }
}

this和参数绑定

function myThrottle(fn,interval){
    let startTime = 0
    return _throttle = function (...args){
        let nowTime = new Date().getTime()
        let waitTime = interval - (nowTime - startTime)
        if(waitTime <= 0){
            fn.apply(this,args)
            startTime = nowTime
        }
    }
}

对立即执行进行控制

引入一个变量 leading 对立即执行进行控制

function myThrottle(fn, interval, leading = true) {
  let startTime = 0
  return _throttle = function(...args) {
    let nowTime = new Date().getTime()
    // 控制是否立即执行
     if (!leading && startTime === 0) {
      startTime = nowTime
    }
    let waitTime = interval - ( nowTime - startTime)
  	if (waitTime <= 0) {
      fn.apply(this, args)
      startTime = nowTime
    }
  }
}

现有的封装好的
undercore
lodash

Eric Coper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js防抖节流原理及实现。
Snail_____的博客
10-11 912
1）防抖 原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 适用场景： 按钮提交场景：防止多次提交按钮，只执行最后提交的一次 搜索框联想场景：防止联想发送请求，只发送最后一次输入 简易版实现： function debounce(func, wait) { let timeout; return function () { const context = this; const args = arguments;
防抖节流打包
l_tsov的博客
12-11 658
防抖 function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(fn,delay) // 简化写法 } } // 然后是旧代码 function showTop () { var scrollTop = d.
节流和防抖
qq_41860476的博客
10-15 3500
节流和防抖的目的：都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象。 节流和防抖的区别： 节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次 防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。 以下分别是节流和防抖的实现代码 节流 <script> /* 节流 思路： 节流是确保在delay之前只有一次事件触
节流防抖详解，附代码
谢谢你的关注
08-09 1185
节流和防抖类似，只不过节流不是只有最后输出，而是每过一段时间执行一次，例如鼠标滚轮事件，每当鼠标向下滚动时我们需要加载数据，但是如果不加以控制你会发现只是向下滚动了一小下，结果可能却执行了几十此事件，此时我们需要加以节制，例如我们想控制每半秒钟请求一次数据，此时防抖就不适用了，因此我们需要使用节流来控制...
7.防抖节流函数代码详解
m0_56986233的博客
03-28 629
防抖：一个通俗的说法，防抖就是英雄联盟里的回城，不停按回城是触发不了回城跳转的，他只管你按得最后一次。 节流：节流就是英雄的技能，你不停按，只有技能CD好了才能生效。 现在我们来详细的讲解防抖和节流 简单，易理解的防抖详细讲解 <script> let ipt = document.querySelector('input') let t = null // 当你抬起键盘的时候，t有值了，这个时候定时器内的执行函数被清除，被清除了之后t不就等于空了吗， //
JS中的防抖与节流及作用详解
10-17
与防抖不同，节流是在固定时间间隔内保证函数至少执行一次。例如，在滚动事件中，我们可能希望每滚动一定距离才更新一次图片的懒加载状态，而不是每次滚动都更新。这样可以减少对浏览器性能的影响。 在提供的代码中...
Vue的click事件防抖和节流处理详解
10-16
今天小编就为大家分享一篇Vue的click事件防抖和节流处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JS函数节流和防抖之间的区分和实现详解
10-17
1. **首次不执行**：与节流类似，首次调用时不执行，等待设定延迟时间后执行。如果在这期间又有新的调用，将取消定时器并重新设置。 2. **首次执行**：首次调用时执行，之后的调用会在满足延迟条件后执行，允许在...
防抖与节流的封装函数与使用详解
01-20
为了解决这个问题，我们可以采用函数节流（throttle）和函数防抖（debounce）技术。 函数防抖（debounce）的基本思想是在一系列连续的调用中，只有在最后指定的一段时间内没有新的调用，才会执行函数。这个策略就像...
防抖，节流讲解
最新发布
qq_40137978的博客
02-24 253
防抖，节流讲解
防抖和节流 标准简洁解释与代码实现
weixin_44040867的博客
04-29 138
<!-- 防抖和节流：两个用来提升网站性能的策略 --> <!-- 节流： 频繁触发同一个事件时，每隔单位时间执行一次 --> <!-- 防抖： 频繁触发同一个事件时，只执行最后一次的事件 --> <button id="btn">节流</button> <button id="btn1">防抖</button> <script> let timer = n
防抖和节流，情景讲解，代码讲解，防抖和节流二者区别
imkaifan的博客
05-06 218
防抖和节流，情景讲解，代码讲解，防抖和节流二者区别防抖节流防抖和节流二者区别 防抖 防抖可以利用插件解决：lodash； 防抖是什么：防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调函数，如果在这n秒事件又被触发则重新计时。类比：英雄回城。 防抖的实际应用： 输入框防抖 代码 Var timer = null //1、防止抖动的timer Function debounceSearch(keywords) { //2、定义防抖函数 timer = setTimerout(functio
防抖与节流原理及代码实现
WDboke的博客
09-27 666
一、使用背景 由于JavaScript是事件驱动的，大量操作会触发事件，加入到事件队列中处理，而频繁触发事件会导致性能的损耗，页面也有可能出现卡顿 例如常见的文本框输入，当用户在文本框输入搜索条件时，自动查询匹配的关键字并提示给用户，绑定input事件，当输入框内容发生变化时触发多次事件，这时候通过该事件调用接口返回查询数据时也会由于事件的多次触发而发送多次请求，针对这一类现象，更好的处理方法就是接下来说到的防抖与节流。 二、防抖节流的应用场景 1、防抖 多次触发事件，当触发停下来一段时间再执行。
节流与防抖，详细注释一步步学习理解
monoplasty的博客
03-18 264
1. 认识防抖 1.1 函数防抖（debounce函数） 图中蓝色部分是事件不断的被用户触发，下方黄色部分是相应的响应函数真正执行时机。 当事件触发时，相应的函数并不会立即触发，而是等待一定的时间； 当事件密集触发时，函数的触发会被频繁的推迟； 只有等待了一段时间也没有事件触发，才会真正的执行响应函数。 例如：我们玩王者荣耀，当我们回城时，按下回城按钮之后必须等待一定时间，如果期间被人攻击或者走动，就会打断（即响应函数不会执行），只有等待的时间到了才会真正回城。 生活中可以想象这样一个场景：公交站的
防抖和节流是什么？防抖和节流的使用场景（附源代码分享)
业余丰富各种技术栈
08-26 2万+
防抖和节流是什么？防抖和节流的使用场景（附源代码分享)
模仿京东输入内容案例
Jessicawh的博客
08-24 393
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
前端防抖与节流超详细讲解
博哥的二进制世界
04-15 1万+
前端防抖与节流超详细讲解前言防抖什么是防抖实现防抖函数节流什么是节流实现节流函数防抖与节流注意事项 前言 防抖与节流通常作为项目优化的手段，一般都是为了防止用户在短时间内快而频地多次操作，触发动作执行。比如防止用户点击多次提交按钮，触发表单多次提交；防止用户拉动滚动条，多次触发加载更多等情况 防抖 什么是防抖 防抖，顾名思义，就是防止抖动，简而言之就是多次快速频繁地触发事件，也只会执行一次事件函数，但是要记住，需要加上一个时间限制（总不能上一次触发和下一次触发前后相隔半个钟，也才执行一次吧？这样就不是防抖了
防抖节流代码分析
拯救世界的光太郎
10-22 676
代码出处：【前端性能】高性能滚动 scroll 及页面渲染优化 // 防抖动函数 function debounce(func, wait, immediate) { var timeout; // ① return function() { // ② var context = this, args = arguments; // ③ var later = function() { /
防抖和节流（详细） 使用场景和区别
热门推荐
留着鼻涕敲代码
10-22 2万+
1.防抖 （多次触发 只执行最后一次） 作用： 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间 防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒 实现代码： <body> <input type="text" id="inp"> <script> // 1.封装防抖函数 function debounce(fn, time) {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值