js_防抖与节流

最新推荐文章于 2024-06-27 13:36:25 发布
最新推荐文章于 2024-06-27 13:36:25 发布
阅读量145 收藏
点赞数
分类专栏： js 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51181022/article/details/128445332
版权

防抖（debounce）

防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。

防抖的应用场景

  1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖。
  2. 调整浏览器窗口大小时，resize次数太过于频繁，造成计算过多，此时需要一次到位，就用到了防抖。
  3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存。

特点

等待某种操作停止后，加以间隔进行操作

  • 持续触发不执行
  • 不触发的一段时间之后再执行

代码实现

代码如下，可以看出来防抖重在清零clearTimeout(timer)

function debounce(f, wait) {
    let timer
    return (...args) => {
        clearTimeout(timer)
        timer = setTimeout(()=>{
            f(...args)
        }, wait)
    }
}

节流（throttle）

节流，顾名思义，控制水的流量。控制事件发生的频率，如控制为1秒发生一次，甚至1分钟发生一次。与服务端（server）及网关（gateway）控制的限流（Rate Limit）类似。

节流的应用场景

  1. scroll事件，每隔一秒计算一次位置信息等。
  2. 浏览器播放事件，每隔一秒计算一次进度信息等。
  3. input框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求（也可做防抖）

特点

每等待某种间隔后，进行操作

  • 持续触发并不会执行多次
  • 到一定事件 / 其他间隔（如滑动的高度）再去执行

代码实现

代码如下，可以看出来节流重在开关锁timer=null

function throttle(f, wait) {
    let timer
    return (...args) => {
        if(timer) { return }
        timer = setTimeout(() => {
            f(...args)
            timer = null
        }, wait)
    }
}

如何实现节流防抖

在实际开发的业务场景中，我们更多的会选择成熟的第三方库来达到防抖和节流的效果。目前常用的有：Lodash、Underscore.js等，还可以使用计数器来实现节流防抖等。

防抖代码实现

<input name="username" type="text" oninput="checkUsername(this)"/>
<script>
	var handler;
    function checkUsername(it) {
        clearTimeout(handler);
        handler = setTimeout(() => {
            // TODO
        }, 1000)
    }
</script>

上面代码的意思是：如果在1000毫秒内，反复执行checkUsername函数，那么setTimeout就会被反复清楚，并且重复设置一个新的1000毫秒的定时任务。直到你执行checkUsername的前后两次间隔超过1000毫秒，定时任务才有机会执行一次。

节流代码实现

<input name="name" type="text" oninput="checkUsername(this)" />
<script>
	var isRuning = false;
    function checkUsername(it) {
        if(!isRuning) {
            isRuning = true;
            // TODO
            setTimeout(() => {
                isRuning = false;
            }, 1000)
        }
    }
</script>

上面代码的意思是：第一次执行checkUsername函数的时候，!isRuning为true，执行关键代码，改变isRuning为true，设置一个1000毫秒后再把isRuning再改为false。那么，当你在1000毫秒内反复执行checkUsername的话，关键代码都不会执行，只有等到定时器执行后，再次执行checkUsername，才会执行关键代码。

Lodash防抖节流源码分析

防抖：Lodash实现防抖的核心思想在于不去频繁管理定时器，而是实现了shouldInvoke来判断是否应该执行func函数，只有在对外提供的cancel方法取消延迟时才取消定时器。

下文在函数执行模块详细介绍了shouldInvoke内部实现逻辑，在定时器开关和入口函数中调用来决定是否应该执行func函数。

基本定义

以下是Lodash实现防抖的整体代码结构，入口函数定义了一些定时器相关和函数执行相关的变量。一共10个变量，其中maxWait、timerId、lastCallTime、lastInvokeTime、leading、maxing、trailing7个时间相关的变量是实现定时器开关和函数执行模块的重要支撑。

import isObject from './isObject.js'
import roor from './internal/root.js'
function debounce(func, wait, options) {
	/**  ===== 基础定义  =====  **/
	let lastArgs, // 上一次执行debounce的arguments
		lastThis, // 上一次的 this
		maxWait, // 最大等待时间，保证大于设置的最大间隔后一定会执行，用于实现节流效果
		result, // 函数 func 执行后的返回值
		timerId, // 定时器ID
		lastCallTime // 上一次调用 debounce 的时间

	let lastInvokeTime = 0 // 上一次执行func的时间，用于实现节流效果
	let leading = false // 延迟前第一次触发
	let maxing = false // 是否设置了最大等待时间maxWait，多用于实现节流效果
	let trailing = true // 延迟后最后一次触发
	const useRAF = (!wait && wait !== 0 && typeof root.requestAnimationFrame === 'function')

	if (typeof func !== 'function') {
		throw new TypeError('Expected a function')
	}
	// 隐式转换
	wait = +wait || 0
	/**
	 * isObject 判断是否是一个对象
	 * function isObject(value) {
	 *   const type = typeof value
	 *   return value != null && (type == 'object' || type == 'function')
	 * }
	 */
	if (isObject(options)) {
		leading = !!options.leading
		maxing = 'maxWait' in options
		// maxWait 取 maxWait 和 wait 中最大值，为实现节流效果，需保证 maxWait 的实际值大于 wait 
		maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait
		trailing = 'trailing' in options ? !!options.trailing : trailing
	}


	/** ======  定时器开关 ====== */

	// 设置定时器
	function startTimer(pendingFunc, wait) {}

	// 取消定时器
	function cancelTimer(id) {}

	// 计算仍需等待的时间
	function remainingWait(time) {}

	// 定时器回调
	function timerExpired() {}


	/** ======  函数执行 ====== */

	// 延迟前
	function leadingEdge(time) {}

	// 延迟后回调
	function trailingEdge(time) {}

	// 执行 func 函数
	function invokeFunc(time) {}

	// 判断此时是否应该执行 func 函数
	function shouldInvoke(time) {}


	/** ======  对外回调 ====== */

	// 取消延迟
	function cancel() {}

	// 立即调用
	function flush() {}

	// 判断是否在定时中
	function pending() {}

	// 入口函数
	function debounced(...args) {}
	debounced.cancel = cancel
	debounced.flush = flush
	debounced.pending = pending
	return debounced
}

export default debounce

定时器开关

/** ======  定时器开关 ====== */

// 设置定时器
function startTimer(pendingFunc, wait) {
	if (useRAF) {
		// 没设置 wait 或设置 wait 为 0 时调用 window.requestAnimationFrame()。
		// 要求浏览器在下次重绘之前调用指定的回调函数更新动画
		root.cancelAnimationFrame(timerId)
		return root.requestAnimationFrame(pendingFunc)
	}
	return setTimeout(pendingFunc, wait)
}

// 取消定时器
function cancelTimer(id) {
	if (useRAF) {
		return root.cancelAnimationFrame(id)
	}
	clearTimeout(id)
}

// 计算仍需等待的时间
function remainingWait(time) {
	// 当前时间与上一次调用 debounce 的间隔
	const timeSinceLastCall = time - lastCallTime
	// 当前时间与上一次执行 func 的间隔
	const timeSinceLastInvoke = time - lastInvokeTime
	// 剩余等待时间
	const timeWaiting = wait - timeSinceLastCall

	// 是否设置了最大等待时间 ( 是否设置为节流 )
	// 否：剩余等待时间
	// 是：剩余等待时间 和 当前时间与上一次执行 func 的间隔 中的最小值

	return maxing ?
		Math.min(timeWaiting, maxWait - timeSinceLastInvoke) :
		timeWaiting
}

// 定时器回调
function timerExpired() {
	const time = Date.now()
	// 应该执行 func 函数时，执行延迟后回调
	if (shouldInvoke(time)) {
		return trailingEdge(time)
	}
	// 计算仍需等待的时间，重置定时器
	timerId = startTimer(timerExpired, remainingWait(time))
}

函数执行

/** ======  函数执行 ====== */

// 延迟前
function leadingEdge(time) {
	// 设置上次执行 func 函数的时间
	lastInvokeTime = time
	// 设置定时器
	timerId = startTimer(timerExpired, wait)
	// 如果设置了 leading 则立即执行 func 函数一次
	return leading ? invokeFunc(time) : result
}

// 延迟后回调
function trailingEdge(time) {
	timerId = undefined

	// trailing 延迟后继续触发一次 
	// lastArgs 标记着 debounce 至少执行过一次
	if (trailing && lastArgs) {
		return invokeFunc(time)
	}
	// 重置参数
	lastArgs = lastThis = undefined
	return result
}

// 执行 func 函数
function invokeFunc(time) {
	const args = lastArgs
	const thisArg = lastThis

	lastArgs = lastThis = undefined
	lastInvokeTime = time
	result = func.apply(thisArg, args)
	return result
}

// 判断此时是否应该执行 func 函数
function shouldInvoke(time) {
	// 当前时间与上一次调用 debounce 的间隔
	const timeSinceLastCall = time - lastCallTime
	// 当前时间与上一次执行 func 的间隔
	const timeSinceLastInvoke = time - lastInvokeTime

	// 首次调用
	// 超出等待时间间隔 wait
	// 系统时间发生了变更
	// 超出最长等待时间 maxWait
	return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
		(timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait))
}

对外回调

 /** ======  对外回调 ====== */

  // 取消延迟
  function cancel() {
    // 取消定时器
    if (timerId !== undefined) {
      cancelTimer(timerId)
    }
    // 重置参数
    lastInvokeTime = 0
    lastArgs = lastCallTime = lastThis = timerId = undefined
  }

  // 立即调用
  function flush() {
    return timerId === undefined ? result : trailingEdge(Date.now())
  }

  // 判断是否在定时中
  function pending() {
    return timerId !== undefined
  }

节流：Lodash中节流函数的实现简洁，直接调用防抖函数，通过设置入参的maxWait达到节流效果。

function throttle(func, wait, options) {
	let leading = true
	let trailing = true

	if (typeof func !== 'function') {
		throw new TypeError('Expected a function')
	}
	if (isObject(options)) {
		leading = 'leading' in options ? !!options.leading : leading
		trailing = 'trailing' in options ? !!options.trailing : trailing
	}
	return debounce(func, wait, {
		leading,
		trailing,
		'maxWait': wait
	})
}

export default throttle

总结

防抖：防止抖动，不触发的一段时间之后再执行。代码实现重在清零clearTimeout

节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即Rate Limit。代码实现重在开关锁timer = timeout; timer = null

借用防抖和节流的思想，来控制函数执行的时机，可以节约性能，避免页面卡断等带来不好的用户体验。防抖和节流的概念相似不易区分。

Joyce Lee
关注
专栏目录
JS中的防抖与节流及作用详解
10-17
在JavaScript中，防抖（debounce）和节流（throttle）是两种常见的优化策略，它们主要用于处理高频触发的事件，如窗口的resize、scroll事件，或者用户输入时的keyup事件等。这两种策略的主要目的是限制函数的执行...
JavaScript第 12 篇，JavaScript防抖功能，原生JavaScrip防抖（原生JS防抖函数，防抖功能的应用与解析，手把手教学）
weixin_65793170的博客
04-04 1万+
⭐防抖就是某一高频事件不断被触发时，仅在最后一次真正执行事件处理代码，将多次执行变为最后一次执行，具体点就是我们在触发高频事件后，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。其实，防抖和节流都是防止函数多次调用。
JS中的防抖
热门推荐
weixin_49592687的博客
04-20 5万+
节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,那这篇文章主要是针对这些同学们的,浅谈一下防抖和节流 防抖: 1. "防抖"是什么 首先,先去解释一下什么叫做防抖, 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。纯理论是比较抽象的,还是用代码来的实在。 假设: 我有一个<input>标签,并想获得输入时的值,代码是这样的: <body> <input type="text"> <script>
JavaScript性能优化利器：全面解析防抖（Debounce）与节流（Throttle）技术、应用场景及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略
最新发布
JINGWHALE
06-27 953
本文详细介绍了防抖（Debounce）与节流（Throttle）技术的概念、应用场景以及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略。JavaScript中的防抖（Debounce）与节流（Throttle）是用来优化高频率事件处理的策略。防抖减少连续触发，节流控制执行频率。
js防抖使用方法
ike_kenny的博客
12-25 503
其他部分与简单版防抖相同。是一种在处理频繁触发的事件时用到的技术，它可以限制一个函数在一定时间内只执行一次。带立即执行功能的防抖可以在页面加载后立即执行一次函数，然后在指定时间内再次触发事件时不会立即执行，而是延迟指定时间后执行。防抖的实现方式不同，但它们的思路相同：通过控制函数的执行频率，避免函数被过于频繁地调用，从而减轻浏览器的负担。简单版防抖的原理是在事件被触发 n 秒后再执行回调函数，如果在这段时间内该事件又被触发，则重新计时。它们的主要目的是减少函数的执行次数，从而提高网页的响应速度和性能。
JS的节流与防抖的目的，区别以及实现方式 （关注收藏，持续更新）
王春燕的博客
04-20 7935
一、节流和防抖的目的： 都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象 二、节流和防抖的区别： 防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。 节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次 三、节流和防抖的详解 防抖 debounce（设置1分钟只会执行一次，如果1分钟内又多次触发，会从再次触发开
Js中防抖与节流，函数防抖和函数节流
m0_64460287的博客
03-02 596
就拿上述的场景来说，假设向后台发送 ajax 请求的响应时间大概是在 2s 左右，那就设置这个等待时间为 2s，当用户第一次点击 加载更多 按钮后，该回调函数并没有立即执行，也就是还没有开始发送 ajax，此时该函数在等待，如果在 2s 内用户又点击了 加载更多，那就重新计算等待时间，再等待 2s ，此时 2s 过去了，用户没再第三次点击 加载更多 按钮了，那么该函数就开始执行了，向后端发送 ajax 请求了。防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数只能执行一次，
浅析JavaScript 函数防抖和节流
10-15
JavaScript函数防抖和节流是前端开发中常见且重要的性能优化技术，它们主要用于控制在一定时间间隔内高频触发的事件函数的执行频率，以避免不必要的计算或者请求，提高程序的性能和用户体验。 函数防抖(debounce)的...
JS防抖和节流实例解析
10-16
因此，为了避免不必要的性能损耗，JavaScript 提供了防抖和节流这两种处理方式。 防抖（debounce）的原理是在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。这样可以有效地减少事件执行的...
浅析Vue 防抖与节流的使用
10-15
在前端开发中，特别是在使用Vue.js框架进行项目开发时，我们经常会遇到需要优化性能的场景。...通过实例代码的学习和应用，我们可以更好地掌握Vue中防抖与节流的使用方法，并在实际项目中灵活运用。
什么是防抖和节流？有什么区别？如何实现？
海阔天空
04-25 3117
什么是防抖和节流？有什么区别？如何实现？ 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时 节流 完成节流可以使用时间戳与定时器的写法 使用时间戳写法，事件会立即执行，停止触发后没有办法再次执行 function throttled1(fn, delay = 500) { let oldtime = Date.now() return function (…args) { let newtime = Date.now() i
JS防抖和节流详解
qq_44741577的博客
02-01 7129
防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的等事件在发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle(防抖)和deboumnce(节流)的方式来减少调用频率节流：n秒内只运行一次，若在n 秒内重复触发，只有一次生效防抖：n秒后在执行该事件，若在n秒内被重复触发，则重新计时。用户高频事件完了，再进行事件操作防抖和节流都是为了阻止操作高频触发，从而浪费性能。
JS —— js中的节流与防抖
Bonsoir777的博客
11-21 5895
本文主要介绍js中的节流与防抖等相关知识点
JS防抖和节流（详解）
Zhang_wang_yun的博客
04-10 4862
函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
优雅而高效的JavaScript——防抖和节流
杜永康的博客
10-18 1698
防抖和节流是两种优化事件处理的方式，能够有效地提高页面性能和用户体验。在大量事件或者频繁触发事件时，使用防抖和节流可以降低事件处理的频率或延迟触发事件，从而避免页面卡顿、响应延迟等问题。防抖的基本原理是延迟触发事件，在事件停止触发一段时间后执行最后一次回调函数。通过使用防抖函数，可以将复杂的事件处理逻辑优化为延迟触发的形式。防抖适用于需要延迟触发事件，并在一定时间内只执行最后一次回调的情况。节流的基本原理是限制事件的触发频率，在一定时间只执行一次回调函数。
JS高级——防抖函数
@SCY
02-26 3829
防抖函数具体实现过程
JS防抖节流（详细）
博客简介
06-13 1994
js防抖节流的详细介绍
【JS进阶】防抖与节流
cannotbecounted的博客
09-08 464
JS防抖与节流
JS防抖函数的实现(巨详细,秒懂)
qq_63299825的博客
05-25 1万+
在一定的时间间隔内,如果没有再次触发该函数,那么才会去执行函数体内的代码(例如发送网络请求)。
JS防抖与节流技术深度解析
"js防抖和节流的深入讲解" JavaScript中的防抖(debounce)和节流(throttle)是两种常见的优化技术，它们主要用于控制频繁触发的事件，如用户输入、窗口滚动、页面加载等，以避免过度消耗系统资源，提高用户体验。 ##...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Joyce Lee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值