关于防抖与节流的思考

时间:2019-08-22
本文章向大家介绍关于防抖与节流的思考,主要包括关于防抖与节流的思考使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

百度防抖与节流,一直没搞懂防抖与节流的区别,然后google了一下,(google大法好

 _(:з」∠)_)个人理解了一下
  1,比较正式的解释他们的区别:
          防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,防抖注重结果
           节流::是让一个函数无法在很短的时间间隔内连续调用,当上一次执行完之后过了规定的时间间隔,才能进行下一次的函数调用,节流注重过程
  2,非官方解释
          防抖:A打了一个B一下,B开始哭(假设哭5分钟),在这5分钟内A一直打,而B就只为哭A打的第一下,其他的从第二次开始,B就像练了金钟罩一样,抗打ƪ(˘⌣˘)ʃ,但是这5分钟过了之后金钟罩没了,需要A重新打一次,让B哭出来才重新生成金钟罩
          节流:这就有点像鬼畜了,A一直打,B一直哭,但是每次都是重新哭,类似于诸葛亮说 ‘竟然有如此厚颜无耻之人’,那么我们在暂停与播放之间快速切换就会出现 ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘有如此厚颜无耻之人’;
  3,应用场景
         防抖:窗口 resize时,搜索时需要根据输入框中的内容发送ajax请求时。。。。。。
         节流:滚动条到达底部(比如要做加载更多)。。。。。。
 4,程序实现:
//节流
   let time;
   let per = 200; //这个是间隔时间,即事件触发到事件回调开始执行的间隔时间。根据业务需求决定
    function throtting(){
     if(time){
   clearTimeout(time)
}
    time = setTimeout(function(){
   //事件回调的具体方法

},per)

}
//防抖
   let timelength=2000;//即在2秒内自第二次开始的其他事件触发都将被忽略
   let lasttime = null;//上一次执行的时间点
   function debounce(){
     if(!lasttime){
lasttime = new Date().getTime()
   }else{
     let curenttime=new Date().getTime();
    if(curenttime - lasttime>2000){
 //事件回调的具体方法
   //需将上一次的时间更新↓
     lasttime = curenttime 

}else{
  //时间不够,不做任何操作
return false

}

}
     

}

原文地址:https://www.cnblogs.com/tony-stark/p/11393822.html