JavaScript防抖与节流[附demo演示,包教包会]
发布网友
发布时间：2024-10-01 03:01
我来回答
共1个回答
热心网友
时间：2024-12-04 00:38
防抖
指触发事件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中的debouncelodash是一个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中的throttleimport_from'lodash'constlodashThrottleSearchAsync=_.throttle(asyncfunction(){letresult=awaitgetDebounceOrThrottle()console.log('result：',result)},1000)作者：瑾行链接：https://juejin.cn/post/7000762453361426462著作权归作者所有。
