JavaScript中防抖和节流的原理和区别详解
前言
JavaScript 中，防抖和节流是一种用于优化事件处理函数调用频率的技术。防抖和节流的目的都是为了避免频繁地触发事件处理函数，从而减少浏览器和服务器的负担。
防抖
防抖（Debounce）的原理是在事件被触发后，等待一定的时间间隔（比如500ms），如果在这个时间间隔内没有再次触发该事件，才会执行事件处理函数。如果在这个时间间隔内又触发了该事件，那么就重新等待新的时间间隔。
防抖主要是通过定时器来实现，如下：
function debounce(fun, time) {
let timer
return function () {
let that = this
if (timer) clearTimeout(timer)
timer = setTimeout(function () {
fun.call(that)
}, time)
}
}以上代码中，fun 是事件处理程序，time 是事件执行的延迟时间，单位：毫秒。每一次触发事件时，会先判断一下 timer 的值是否赋值了定时器，如果赋值了，就直接清除定时器。然后在执行下面的代码。
节流
节流（Throttle）的原理是在事件被触发后，首先执行事件处理函数，然后设置一个时间间隔（比如500ms），在这个时间间隔内不再触发该事件。只有等待这个时间间隔过去后，才会重新触发事件，并再次执行事件处理函数。
节流的实现方式有两种：
- 使用定时器实现
function throttlea(fun, t) {
let timer = null
return function () {
let that = this
if (!timer) {
timer = setTimeout(function () {
fun.call(that)
timer = null
}, t)
}
}
}以上代码中，触发事件后，会直接重新赋值 timer 为一个定时器，到时间后执行事件处理程序，重新赋值 timer 为 null，在这期间，因为 timer 的值是一个定时器，if 判断是不会执行的，必须重新赋值为 null 后才会重新执行。
- 时间戳的方式
function throttle(fun, time) {
let start = 0
return function () {
let that = this
let current = Date.now()
if (current - start >= time) {
fun.call(that)
start = current
}
}
}以上代码中，触发事件后，定义开始触发事件的时间 start 为零，获取当前的时间戳赋值给 current，判断当前时间与初始时间是否超过间隔，如果超过了就把当前这个时间戳赋值给 start，然后执行事件处理程序。（因为初始时间为零，所以第一次触发会直接执行）
总结
防抖：适用于需要等待用户停止操作后再执行的场景，比如搜索框输入文本后请求接口。
节流：适用于需要限制函数执行频率的场景，比如滚动事件中的懒加载。
到此这篇关于JavaScript中防抖和节流的原理和区别详解的文章就介绍到这了,更多相关JavaScript防抖和节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS实现的简单tab切换功能,结合完整实例形式分析了javascript基于事件响应实现页面元素属性动态变换相关操作技巧,需要的朋友可以参考下2019-06-06
在浏览器上打印应该一个比较常见的操作, 最简单的打印方式就是直接点击浏览器右上角,找到“打印”按钮或者调用window.print(), 然而,实际情况下大多数需求都不会如此简单,所以本文给大家介绍了使用JS自定义打印及静默打印的方法实现,需要的朋友可以参考下2024-01-01
这篇文章主要大家详细解析了微信QQ的二维码登录原理js代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要为大家详细介绍了js HTML5 Canvas绘制转盘抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了javascript瀑布流式图片懒加载实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了怎样用JavaScript实现观察者模式，想学习设计模式的同学，可以参考一下2021-04-04
big.js与bignumber.js的差异、统一配置与避坑技巧完全指南
big.js是一个小巧、快速且易于使用的JavaScript库,专门用于任意精度的十进制算术运算,这篇文章主要介绍了big.js与bignumber.js的差异、统一配置与避坑技巧完全指南,需要的朋友可以参考下2026-01-01
这篇文章主要介绍了javascript 中select框触发事件过程的分析的相关资料,这里对select 触发过程进行了深入分析，帮助大家理解这部分内容，需要的朋友可以参考下2017-08-08
在JavaScript中，创建一个具有自定义属性和方法的对象有很多种模式，下面一一进行介绍2012-05-05
浏览器的各种菜单命令比如打印、查看源文件、加入收藏等等，这些在js中时完全可以实现的，本文搜集整理了一些，感兴趣的朋友可以参考下2013-10-10
最新评论