当前位置: 首页 > Web前端 > HTML

防抖节流功能(搭载全球使用)

时间:2023-04-02 18:48:21 HTML

*防抖功能:debounce.jslettimeout=null;/**在一定时间内,只执行最后一次操作,wait毫秒后执行该函数**@param{Function}func的回调要执行的函数*@param{Number}wait延迟时间*@param{Boolean}immediate是否立即执行*@returnnull*/functiondebounce(func,wait=500,immediate=false){//清空定时器if(超时!==null)clearTimeout(超时);//立即执行,这种情况一般不用if(immediate){varcallNow=!timeout;timeout=setTimeout(function(){timeout=null;},等待);if(callNow)typeoffunc==='函数'&&func();}else{//设置定时器,在最后一次操作后,timeout不会被清除,所以延迟wait毫秒后执行func回调方法timeout=setTimeout(function(){typeoffunc==='function'&&func();},等待);}}exportdefaultdebounce-throttlingfunctionlettimer,flag;/***节流原则:一定时间内,只触发一次**@param{Function}func回调函数执行*@param{Number}wait延迟时间*@param{Boolean}immediate是否立即执行*@returnnull*/functionthrottle(func,wait=500,immediate=true){if(立即){if(!flag){flag=true;//如果立即执行,typeoffunc==='function'&&func();timer=setTimeout(()=>{flag=false;},等待);}}else{if(!flag){flag=true//如果不立即执行,则在等待毫秒结束时执行timer=setTimeout(()=>{flag=falsetypeoffunc==='function'&&func();},等待);}}};exportdefaultthrottlemountglobal:main.jsimportthrottlefrom'./utils/throttle'Vue.prototype.$throttle=throttleimportdebouncefrom'./utils/debounce'Vue.prototype.$debounce=debounce复制代码