JavaScript防抖与节流 [ 附demo演示，包教包会 ]

防抖

指触发事件n秒后再执行回调，若在n秒之内再次被触发，则重新计时。

手写实现防抖

functiondebounce(fn,delay){lettimerreturnfunction(){letthat=thisletargs=argumentsif(timer)clearTimeout(timer)timer=setTimeout(function(){fn.apply(that,args)},delay)}}

应用

由定义可知，防抖主要是为了解决事件频繁触发的问题，且仅采取频繁触发的最后一次操作。

常用场景：

输入框联想。

窗口resize事件。

以vue3为例, 针对el-input的@input事件进行防抖，接口临时写的，没有返回值，主要还是让大家感受下防抖前后的现象。还有在线Demo，亲身体验，点我 ?。

<template><divclass="debounce-throttle"><divclass="case-one"><divclass="title">未防抖Input</div><el-inputv-model="caseStateOne"placeholder="请输入内容"@input="notDebounceSearchAsync"></el-input></div><divclass="case-two"><divclass="title">防抖Input</div><el-inputv-model="caseStateTwo"placeholder="请输入内容"@input="debounceSearchAsync"></el-input></div></div></template><scriptsetup>import{getDebounceOrThrottle}from'@/api/api.js'import{ref}from'vue'letcaseStateOne=ref('')letcaseStateTwo=ref('')/***@description:防抖函数*@param{*}fn*@param{*}delay*@return{*}*/constdebounce=function(fn,delay){lettimerreturnfunction(){letthat=thisletargs=argumentsif(timer)clearTimeout(timer)timer=setTimeout(function(){fn.apply(that,args)},delay)}}/***@description:未防抖远程搜索函数*@param{*}queryString*@param{*}cb*@return{*}*/constnotDebounceSearchAsync=asyncfunction(){letresult=awaitgetDebounceOrThrottle()console.log('result：',result)}/***@description:防抖远程搜索函数*@param{*}queryString*@param{*}cb*@return{*}*/constdebounceSearchAsync=debounce(asyncfunction(){letresult=awaitgetDebounceOrThrottle()console.log('result：',result)},1000)</script>

lodash 中的 debounce

lodash是一个JavaScript工具库，也提供了防抖函数。既然有成熟的库，为何不用呢？

import_from'lodash'constlodashDebounceSearchAsync=_.debounce(asyncfunction(){letresult=awaitgetDebounceOrThrottle()console.log('result：',result)},1000)

节流

规定在n秒内，只能触发一次回调。若在n秒内触发多次函数，只有第一次生效

手写节流

functionthrottle(fn,delay){lettimerreturnfunction(){letthat=thisletargs=argumentsletnow=+newDate()if(timer)returntimer=setTimeout(function(){fn.apply(that,args)timer=null},delay)}}

应用

由定义可知，节流也是为了解决事件频繁触发的问题，且仅采取频繁触发的第一次操作。

常用操作：

鼠标交互事件

滚动事件

以vue3为例, 针对el-button的@click事件进行防抖，接口临时写的，没有返回值，主要还是让大家感受下防抖前后的现象。还有在线Demo，亲身体验，点我?。

<template><divclass="debounce-throttle"><divclass="case"><divclass="title">未节流</div><el-button@click="notThrottleSearchAsync">点我</el-button></div><divclass="case"><divclass="title">节流</div><el-button@click="throttleSearchAsync">点我</el-button></div><divclass="case"><divclass="title">lodash节流</div><el-button@click="lodashThrottleSearchAsync">点我</el-button></div></template><scriptsetup>import{getDebounceOrThrottle}from'@/api/api.js'import{ref}from'vue'/***@description:节流点击函数*@param{*}queryString*@param{*}cb*@return{*}*/constthrottleSearchAsync=throttle(asyncfunction(){letresult=awaitgetDebounceOrThrottle()console.log('result：',result)},1000)/***@description:lodash节流点击函数*@param{*}queryString*@param{*}cb*@return{*}*/constlodashThrottleSearchAsync=_.throttle(asyncfunction(){letresult=awaitgetDebounceOrThrottle()console.log('result：',result)},1000)/***@description:未节流点击函数*@param{*}queryString*@param{*}cb*@return{*}*/constnotThrottleSearchAsync=asyncfunction(){letresult=awaitgetDebounceOrThrottle()console.log('result：',result)}</script>

lodash 中的 throttle

import_from'lodash'constlodashThrottleSearchAsync=_.throttle(asyncfunction(){letresult=awaitgetDebounceOrThrottle()console.log('result：',result)},1000)

作者：瑾行链接：https://juejin.cn/post/7000762453361426462著作权归作者所有。