初次接触防抖与节流，看看原理、实现与区别

最新推荐文章于 2024-04-14 14:49:42 发布

丑小鸭变黑天鹅

最新推荐文章于 2024-04-14 14:49:42 发布

阅读量133

点赞数

分类专栏： javascript日常总结文章标签： javascript

本文链接：https://blog.csdn.net/qq_41880073/article/details/115548601

版权

本文详细探讨了JavaScript中的函数防抖(debounce)和节流(throttle)的概念，包括它们的原理、应用场景及多种实现方式。防抖通过限制函数在特定时间段内的执行次数，确保在操作停止后才执行；节流则保证在一定时间间隔内至少执行一次函数，适用于需要频繁触发但又不需连续响应的场景，如页面滚动、输入验证等。

摘要由CSDN通过智能技术生成

在看这篇文章之前，如果你还不知道apply、call、arguments之间的区别以及作用，那么建议你先去看一看这些内容。直接坐飞机过去了解一下
apply、call、arguments之间的区别以及作用

一、函数防抖（debounce）

1、原理

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

2、使用场景

按钮提交场景：防止多次提交按钮，只执行最后提交的一次

搜索框联想场景：防止联想发送请求，只发送最后一次输入

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

3、实现

1、简单实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p>
		<p>防抖测试</p