防抖和节流
Posted web-zxq
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了防抖和节流相关的知识,希望对你有一定的参考价值。
1.什么是函数节流?
函数节流,一个函数执行一次后,只有大于设定的执行周期后才会执行第2次。
-换句话说:有个需要频繁触发函数,出于性能优化角度,在规定时间内,只让函数触发的第一次生效,后面不生效。
function throttle(fn,delay){
// 记录上一次函数触发时间
var lastTime = 0;
return function (){
// 记录当前函数触发的时间
var nowTime = Date.now();
if(nowTime - lastTime > delay){
fn();
//同步时间
lastTime = nowTime;
}
}
}
document.onscroll = throttle(function(){ console.log(‘scroll事件被触发了‘+Date.now());},200)
2.什么是函数防抖?
一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效
function debounce(fn,delay){
// 记录上一次的延时器
var timer = null;
return function(){
// 清除上一次的延时器
timer= setTimeout(function(){ fn.apply(this);},delay);
}
}
document.getElementById(‘btn‘).onclick = debounce (function(){console.log(‘点击事件触发’+Date.now();)},1000);
以上是关于防抖和节流的主要内容,如果未能解决你的问题,请参考以下文章