JavaScript防抖与节流详解
程序员文章站
2022-06-25 10:18:29
目录防抖debounce定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。关于防抖,拿手指按压弹簧举例,用手指按压弹簧,一直按住,弹簧将不会弹起直到松开...
防抖debounce
定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。
关于防抖,拿手指按压弹簧举例,用手指按压弹簧,一直按住,弹簧将不会弹起直到松开手指。
举例resize:
function debounce(fn, wait){ var timer = null; return ()=>{ if(timer !== null){ cleartimeout(timer); } timer = settimeout(fn, wait); } } function handle(){ console.log(math.random()); } window.addeventlistener("resize",debounce(handle, 1000));
上面是非立即执行版
立即执行版
function debounce(fn, wait){ let timeid, flag = true; return () => { cleartimeout(timeid); if(flag){ fn(); flag = false; }else{ timeid = settimeout(()=>{ flag = true; }, wait); } } }
拖动浏览器窗口,触发resize,此时并不触发handle函数,定时器计时,在计时时间内再次触发resize的话,则会从新计时,这样做的好处就是拖动浏览器窗口触发resize,并不会频繁执行handle函数,只让其在需要执行的时候去运行,有效的去除了冗余。
常见写法:
const debounce = (func, delay = 200) => { let timeout = null return function () { cleartimeout(timeout) timeout = settimeout(() => { func.apply(this, arguments) }, delay) } }
节流throttle
定义:让事件在一定时间内只执行一次。
本意是像水龙头的水滴一样,规定时间内只执行一次,减少频繁反复执行。
如搜索框input事件。
通过时间戳计算:
function throttle(fn,wait){ let starttime = 0; return function(){ let endtime = date.now(); if(endtime-starttime>wait){ fn(); starttime = endtime; } } }
通过定时器:
function throttle(fn,wait){ let timeid = null; return function(){ if(!timeid){ timeid = settimeout(function(){ fn(); timeid = null; },wait) } } }
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
上一篇: 虫草花是什么东西长出来的