码迷,mamicode.com
首页 > 其他好文 > 详细

什么是节流函数? 什么是防抖函数?

时间:2019-11-25 22:03:00      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:clear   timer   code   his   last   null   time   ott   settime   

// 函数节流: 一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。
-有个需要频繁触发的函数,处于优化性能的角度考虑,在给定的时间内,只让函数触发的第一次生效,后面不生效-

/* @ param fn 要被节流的函数

  • @ param delay 规定的时间
    */
    function throttle(fn,delay){
//记录上一次函数触发的时间
var lastTime = 0;

return function(){
   // 记录当前函数触发的时间
   var nowTime = Date.now();

   if(nowTime - lastTime > delay) {
     fn.call(this);
     lastTime = nowTime;
   }
}

}

document.onscroll = throttle(function(){ console.log(‘scroll事件被触发了‘+ Date.now());}, 200)

// 防抖函数: 一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效
function debounce(fn, delay){
//记录上一次的延时器
var timer = null;
return function() {
// 清除上一次的延时器
clearTimeout(timer);
//重新设置新的延时器
timer = setTimeout(function(){
fn.apply(this);
},delay);
}
}

document.getElementById(‘btn‘).onclick = debounce(function(){ console.log(‘点击事件被触发了‘ + Date.now());},1000);

什么是节流函数? 什么是防抖函数?

标签:clear   timer   code   his   last   null   time   ott   settime   

原文地址:https://www.cnblogs.com/mengzhongfeixue/p/11930821.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!