简洁高效,让你认清 防抖和节流;
Posted lkkk
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简洁高效,让你认清 防抖和节流;相关的知识,希望对你有一定的参考价值。
/*
* fn -- 用户传入函数
* timer -- 用户传入间隔时间
* debounce_防抖作用:防止用户反复点击,比如提交表单,浏览器滚动监听等,当用户停止点击时候,间隔时间大于timer,则执行传入函数;
* throttle_节流作用:监听事件在timer规定时间内只执行一次,达到节流作用;
*/
function debounce_(fn,timer){
return function(){
clearTimeout(fn.id);
var that = this;
fn.id = setTimeout(function(){
fn.constructor == Function && fn.call(that); //这样可以获取到点击事件源,
// fn() //这样也可以运行,
},timer);
}
};
function throttle_(fn,timer){
var initTimer = new Date(); var first = true; //因为第一次判定时候当前时间和初始时间也许相等,差值也许会小于我们给定的timer,程序不会执行,所以加上这个好些;
return function(){ //采用闭包
var nowTimer = new Date();
if( nowTimer - initTimer >= timer || first){
fn.constructor == Function && fn.call(this); //判断fn是否为函数;是的话就执行 fn.call(this);
initTimer = new Date();
first = false;
}
}
}
function test(){
console.log(‘test‘);
}
document.querySelector(‘button‘).addEventListener(‘click‘,throttle_(test,2000)); //节流
// document.querySelector(‘button‘).addEventListener(‘click‘,debounce_(test,300)); //防抖
以上是关于简洁高效,让你认清 防抖和节流;的主要内容,如果未能解决你的问题,请参考以下文章