JavaScript防抖与节流详解
防抖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)
}
}
}
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
相关文章
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
下面小编就为大家带来一篇浅谈js在html中的加载执行顺序,多个jquery ready执行顺序。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-11-11
js open() 与showModalDialog()方法使用介绍
项目开发中经常要用到js open() 与showModalDialog()方法,下面有个不错的示例,喜欢的朋友可以研究下2013-09-09
解决layui中table异步数据请求不支持自定义返回数据格式的问题
今天小编就为大家分享一篇解决layui中table异步数据请求不支持自定义返回数据格式的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08


最新评论