在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
前言1、防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间 举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发。 节流(thorttle):高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率 举例:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新点购买,可是总有一段时间你点上是没有效果,这里就用到了节流,就是怕点的太快导致系统出现bug。 2、区别:防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。 函数的防抖与节流是一直的面试话题。对于函数防抖与节流的写法,大家都可能比较熟悉,但是在vue中使用函数的防抖或者节流,这里是有一个小插曲的哦。 vue中的正确使用姿势
为啥呢?这个和vue的事件绑定原理有关,这里不详细介绍。如果直接在函数体内部使用的话,最后的结果是,一个匿名的立即执行函数来进行执行,这样是不对的。详细参考 原理函数的防抖
代码书写 第一次非立即执行 export function debounce(f, t){ let timer; return (...arg) => { clearTimeout(timer); timer = setTimeout(() =>{ f( ...arg) }, t) } } 第一次立即执行
export function debounceFirstExe(f, t){ let timer, flag = true; return (...args) => { if (flag){ f(...args); flag = false; }else { clearTimeout(timer); timer = setTimeout(() => { f(...args); flag = true; }, t) } } } 合并版本 export function debounce(f, t,im = false){ let timer, flag = true; return (...args) => { // 需要立即执行的情况 if (im){ if (flag){ f(...args); flag = false; }else { clearTimeout(timer); timer = setTimeout(() => { f(...args); flag = true }, t) } }else { // 非立即执行的情况 clearTimeout(timer); timer = setTimeout(() => { f(...args) }, t) } } }
函数节流
第一次非立即执行 export function throttle(f,t){ let timer=true; return (...arg)=>{ if(!timer){ return; } timer=false; setTimeout(()=>{ f(...arg); timer=true; },t) } }
第一次立即执行版本 export function throttleFirstExt(f, t) { let flag = true; return (...args) => { if (flag) { f(...args); flag = false; setTimeout(() => { flag = true }, t) } } }
合并版 export function throttle(f, t, im = false){ let flag = true; return (...args)=>{ if(flag){ flag = false im && f(...args) setTimeout(() => { !im && f(...args) flag = true },t) } } } 应用场景:
总结到此这篇关于vue函数防抖与节流正确使用的文章就介绍到这了,更多相关vue函数防抖与节流内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论