手拉手带你实现防抖与节流

已于 2023-06-01 23:40:53 修改
阅读量348 收藏 1
点赞数
文章标签： 前端 javascript vue.js es6
于 2023-06-01 23:37:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44995391/article/details/130873373
版权
本文介绍了防抖和节流的概念及其应用场景，如输入框搜索、按钮点击和滚动事件。接着详细讲解了防抖函数的实现，包括基本功能、this和参数绑定、取消功能、立即执行和获取返回值的优化。同样，文章也探讨了节流函数的实现，包括基本功能、this和参数绑定、立即执行、尾调用执行、取消执行以及获取返回值的功能。这些技术常用于前端开发中的性能优化，以避免因频繁事件触发导致的性能问题。
摘要由CSDN通过智能技术生成

文章目录

概要

防抖与节流在前端中是必须要掌握的知识，如果你还不会的话，那我们就嘴对嘴，哦，不不不！那我们就手拉手一起实现一下吧！

防抖

啥子是防抖呢？ 就是触发了一个事件，但是这个事件对应的函数并不会立即执行，而是会等待固定的时间t后才会执行。如果在t时间内再次触发了这个事件，则需要取消上次的函数执行，再次等待t时间后执行。具体流程如下：
在这里插入图片描述
在这里插入图片描述

应用场景

1.输入框中频繁的提交内容，搜索，提交信息
2.频繁的点击按钮，触发某个事件
3.监听浏览器滚动事件，完成特定操作
4.用户缩放浏览器的resize事件

1. 防抖的基本功能实现

function debounce(fn, delay) {
	// 1.标志位，用来记录上一次事件触发的timer
	let timer = null
	/* 
	   为了使小白第一次看这个也能看懂，这里解释的再详细一点。当第一次调用时，timer为null, 
	   因此Boolean(timer) = false，所以clearTimeout(timer)不会执行，即函数不会取消执行，
	   而是等待delay时间片后执行。
	   但是如果在这段时间内再次触发了debounce，则取消上次函数的执行，重新等待delay后执行。
	   不知道你有没有这样的疑问，在一个delay时间片内再次触发，setTimeout()不是还没出结果，
	   那么timer不是还是null吗，那么clearTimeout不会执行啊，如何取消上次的执行呢？
	   这里如果有疑问的话，说明你的JS还有待提高哦。
	   首先，setTimeout确实是负责延迟执行函数的，但他延迟执行的是传入的回调函数，而不是自身。
	   其次，setTimeout由window负责调用，在代码执行过程中会被加入到宏任务队列中，
	   在微任务执行完过后，就开始依次执行宏任务。当执行到它时，会立即执行并返回一个timeoutId。
	   因此，在delay时间片内再次触发时，timer已经有值了，所以就可以取消上次的函数执行了。
	 */
	// 2.触发事件执行的函数
    const myDebounce = () => {
    	// 若等待时间内再次调用，则取消函数执行
        if(timer)   clearTimeout(timer)
        // 否则等待delay时间后执行函数
        timer = setTimeout(() => {
            fn()
            timer = null
        }, delay)
    }
    return myDebounce
}

2. 关于this和参数绑定的优化

function debounce(fn, delay) {
	// 1.标志位，用来记录上一次事件触发的timer
	let timer = null
	// 2.触发事件执行的函数
    const myDebounce = (...args) => {
    	// 若等待时间内再次调用，则取消函数执行
        if(timer)   clearTimeout(timer)
        // 否则等待delay时间后执行函数
        timer = setTimeout(() => {
            fn.call(this, ...args)
            // 或 fn.apply(this, args)
            timer = null
        }, delay)
    }
    return myDebounce
}

3. 关于取消功能的实现

function debounce(fn, delay) {
	// 1.标志位，用来记录上一次事件触发的timer
	let timer = null
	// 2.触发事件执行的函数
    const myDebounce = (...args) => {
    	// 若等待时间内再次调用，则取消函数执行
        if(timer)   clearTimeout(timer)
        // 否则等待delay时间后执行函数
        timer = setTimeout(() => {
            fn.call(this, ...args)
            // 或 fn.apply(this, args)
            timer = null
        }, delay)
    }
    // 3.给myDebounce绑定一个取消的函数
    myDebounce.cancle = () => {
    	if(timer)   clearTimeout(timer)
    }
    return myDebounce
}

4. 关于立即执行功能的实现

// 原则：一个函数用来执行一件事，一个变量用来记录一种状态
function debounce(fn, delay, immediate = false) {
	// 1.标志位，用来记录上一次事件触发的timer
	let timer = null
	// 用来控制防止一个时间片内多次触发而多次执行
	let isInvoke = false
	// 2.触发事件执行的函数
    const myDebounce = (...args) => {
    	// 若等待时间内再次调用，则取消函数执行
        if(timer)   clearTimeout(timer)
		// 判断是否需要立即执行
		if(immediate && !isInvoke) {  // 如果不需要延迟，立即执行
			fn.apply(this, args)
			isInvoke = true
			return 
		} else { // 延迟执行
			 // 否则等待delay时间后执行函数
        	timer = setTimeout(() => {
            	fn.call(this, ...args)
            	// 或 fn.apply(this, args)
            	timer = null
            	isInvoke = false
        	}, delay)
		} 
    }
    // 3.给myDebounce绑定一个取消的函数
    myDebounce.cancle = () => {
    	if(timer)   clearTimeout(timer)
    	timer = null
    	isInvoke = false
    }
    return myDebounce
}

5. 关于获取返回值功能的实现

// 原则：一个函数用来执行一件事，一个变量用来记录一种状态
function debounce(fn, delay, immediate = false, resultCallback) {
	// 1.标志位，用来记录上一次事件触发的timer
	let timer = null
	// 用来控制防止一个时间片内多次触发而多次执行
	let isInvoke = false
	// 2.触发事件执行的函数
    const myDebounce = function(...args) {
    	return new Promise((resolve, reject) => {
    		try {
    			// 若等待时间内再次调用，则取消函数执行
        		if(timer)   clearTimeout(timer)
				// 判断是否需要立即执行 
				if(immediate && !isInvoke) {  // 如果不需要延迟，立即执行
					const res = fn.apply(this, args)
					if(resultCallback)	resultCallback(res)
					resolve(res)
					isInvoke = true
					return 
				} else {  // 延迟执行
					// 等待delay时间后执行函数
       				timer = setTimeout(() => {
         	    		const res = fn.call(this, ...args)
            			// 或 fn.apply(this, args)
            			if(resultCallback)	resultCallback(res)
						resolve(res)
            			timer = null
            			isInvoke = false
        			}, delay) 
				} 
    		} catch(error) {
    			reject(error)
    		}
    	})
    	
    }
    // 3.给myDebounce绑定一个取消的函数
    myDebounce.cancle = () => {
    	if(timer)   clearTimeout(timer)
    	timer = null
    	isInvoke = false
    }
    return myDebounce
}

节流

那啥子是节流呢？就是在一个时间片内无论触发多少次事件，该事件也只会执行一次。具体流程如下：
在这里插入图片描述
在这里插入图片描述

应用场景

1.监听页面的滚动事件
2.鼠标移动事件
3.用户频繁点击按钮操作
4.游戏中的一些设计

1. 基本功能实现

function throttle(fn, interval) {
  // 1.记录上一次的开始时间
  let lastTime = 0
  // 2.事件触发时, 真正执行的函数
  const myThrottle = 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 myThrottle 
}

2. 关于this和参数绑定的实现

function throttle(fn, interval) {
  // 1.记录上一次的开始时间
  let lastTime = 0
  // 2.事件触发时, 真正执行的函数
  const myThrottle = function(...args) {
    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()
    // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      // 2.3.真正触发函数
      fn.apply(this, args)
      // 2.4.保留上次触发的时间
      lastTime = nowTime
    }
  } 
  return myThrottle 
}

3. 关于立即执行功能的实现

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

  // 2.事件触发时, 真正执行的函数
  const myThrottle = function(...args) { 
    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()
    // 对立即执行功能进行控制
    if (!lastTime && !leading) lastTime = nowTime

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

4. 关于尾调用执行功能的实现

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

  // 2.事件触发时, 真正执行的函数
  const myThrottle = 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.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 myThrottle 
}

5. 关于取消执行功能的实现

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

  // 2.事件触发时, 真正执行的函数
  const myThrottle = 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)
    }
  }

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

  return myThrottle 
}

6. 关于获取函数返回值功能的实现

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

  // 2.事件触发时, 真正执行的函数
  const myThrottle = 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)
      }
    })
  }

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

  return myThrottle 
}
少年开心果
关注
手拉手带你实现基于Uniapp和uView，根据权限动态的修改底部菜单tabbar
07-08
【标题】"手拉手带你实现基于Uniapp和uView，根据权限动态的修改底部菜单tabbar"，这个标题揭示了我们即将探讨的核心技术点，那就是如何在使用Uniapp和uView框架开发移动应用时，根据用户权限动态调整底部菜单...
手拉手团购网站建设方案ppt(与“团购”有关文档共24张).pptx
11-14
【团购网站的特点与商业盈利特性】 团购网站的核心特点在于其商业盈利模式，它通过集中大量消费者的需求，形成批量购买力，从而从供应商那里获取更优惠的价格，再以低于市场价格提供给消费者，实现薄利多销。这种...
防抖与节流
qq_41248310的博客
11-13 170
防抖：每次触发事件时都取消之前的延时调用方法 <buttonid="btn">测试</button> <script> function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTi...
防抖和节流的实现
GoldenaArcher的博客
05-16 1715
防抖和节流的实现 有两种实现，第一个使用 lodash 完成，第二个自己写一个防抖/节流的操作。 本质上来说防抖和节流都是为了提升表现性能的一种方式，在前端还是属于很常见的案例。 如果没有实现防抖或节流，那么输入基本上是这样的： 如果每一次输入都会引发一次 API 调用，对于服务器的压力就会非常大。 案例中使用的是 React 进行页面渲染。 防抖(debounce) 防抖指的是让延迟事件的执行操作，如果该事件被重新触发，则延迟重置。应用案例包括不限于：搜索功能，自动保存等。 debounce - Lod
防抖与节流实现
Wrj6811的博客
07-07 1313
本文借鉴于https://segmentfault.com/a/1190000018428170 防抖和节流是开发中经常遇到的需求，先看下 定义： 一、防抖 对于短时间内连续触发的事件（比如页面滚动事件），防抖的含义就是让某个时间期限（如1000毫秒）内，事件处理函数只执行一次 function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ .
什么是防抖和节流？如何实现防抖和节流？
热门推荐
Nicole99618的博客
03-28 2万+
防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能或者说避免资源浪费。毕竟JS操作DOM对象的代价还是十分昂贵的。 应用场景：处理一些频繁触发的事件，例如mousedown、mousemove、keyup、keydown等，不然的话，页面很可能会十分卡顿哦~ 防抖 防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 举个例子吧： 例如，你是一个肯德基外卖配送员，每天专门
如何实现节流与防抖
Floatwor青舟的博客
03-16 744
目录防抖与节流的概念防抖函数（debounce）修复this指向和event问题节流函数（throttle）防抖和节流的区别 防抖与节流的概念 函数防抖： 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。具体场景可以搜索框输入关键字过程中实时 请求服务器匹配搜索结果，如果不进行处理，那么就是输入框内容一直变化，导致一直发送请求。如果进行防抖处理，结果就是当我们输入内容完成后，一定时间(比如500ms)没有再输入内容，这时再触发请求。 函数节流： 高频事件触发，但在n秒内只
RS-485的手拉手连接方案
01-19
有一个智能主机，需要与几个 RS-232 ... 本文介绍并且比较手拉手的方案与直接并联方案，说明手拉手可以实现不限距离和节点数的连接。  1、简单的RS-485直接并联连接  这种直接并联连接也是RS-485
八爪鱼与手拉手HTML5游戏源码
06-18
【八爪鱼与手拉手HTML5游戏源码】是一个基于HTML5技术开发的游戏项目，其特点是使用HTML、CSS和JavaScript等Web前端技术构建。HTML5是超文本标记语言的最新版本，它提供了许多增强功能，如离线存储、媒体元素、 ...
小学寒假少先队你我手拉手,成长心连心活动方案.pdf
11-30
1. 实现我校七支小队与对方学校小队的一对一结对，通过一系列活动增进双方的了解，加深友谊，使学生在学习和生活中互相帮助，共同进步。 2. 通过小队间的交流，让队员们体验真挚的友谊，形成积极的人生观和情感体验...
什么是防抖和节流？怎么实现？
qq_45651984的博客
07-14 832
什么是防抖和节流？怎么实现？
简述防抖和节流，以及如何实现
slient033的博客
04-23 4556
简述防抖和节流，以及如何实现
防抖和节流实现原理
无知者无畏
12-20 1044
防抖或是节流：限制函数的执行次数 防抖：通过 settimeout的方式，在一定的时间间隔内，将多次触发变成一次触发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖和节流</t
防抖和节流的原理及实现
m0_70858457的博客
03-09 180
防抖和节流原理及应用场景
防抖和节流原理和实现
许发君博客
01-27 1109
文章目录防抖和节流原理和实现1. 防抖2. 节流 防抖和节流原理和实现 1. 防抖 原理 多少时间内无论操作多少次只触发一次 实现方式 /** * 防抖 * @params {Function} fn 回调 * @params {Number} 延迟 * @params {Boolean} immediate 是否先执行 */ const debounce = function debounce(fn, wait, immediate = false) { let timer = null
前端性能优化篇之对节流与防抖的理解、如何实现节流函数和防抖函数
最新发布
星辰迷上大海的博客
04-29 798
节流和防抖是优化前端性能和提升用户体验的两种技术。节流控制函数在一定时间间隔内最多执行一次特定操作，常用于处理频繁触发的事件；而防抖延迟执行函数，在一段时间内只执行一次特定操作，常用于处理连续触发的事件。
深入理解防抖和节流：应用场景及实现方式详解
你若盛开，清风自来
07-08 1万+
防抖和节流是在JavaScript中常用的两种技术，用于限制某个函数在短时间内被频繁调用。防抖的原理是在事件被触发后，延迟一定时间执行函数，如果在延迟时间内触发了该事件，则重新计时，直到延迟时间内没有再次触发事件，才执行函数。节流的原理是在规定的时间内，只让函数执行一次，无论事件触发的频率如何。防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。
防抖和节流的区别以及实现
sky11blue的博客
04-11 110
作⽤：本质上是优化⾼频率执⾏代码的⼀种⼿段 如：浏览器的 resize 、 scroll 、 keypress 、 mousemove 等事件在触发时，会不断地调⽤绑定 在事件上的回调函数，极⼤地浪费资源，降低前端性能 为了优化体验，需要对这类事件进⾏调⽤次数的限制，对此我们就可以采⽤ throttle （防抖）和 debounce （节流）的⽅式来减少调⽤频率 定义： • 节流: n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效 • 防抖: n 秒后在执⾏该事件，...
什么是防抖和节流？有什么区别？如何实现？（有这一篇就够了）
贫僧法号依平
03-30 1349
节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时一个经典的比喻:想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应假设电梯有两种运行策略debounce和throttle，超时设定为15秒，不考虑容量限制电梯第一个人进来后，15秒后准时运送一次，这是节流电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。
实现WDS手拉手业务ensp
12-16
实现WDS手拉手业务需要进行以下步骤： 1. 首先，需要在两个无线路由器之间建立WDS桥接连接。具体方法可以参考不同型号无线路由器的说明书或者官方网站上的教程。 2. 在WDS桥接连接建立成功后，需要在两个无线...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值