关于防抖与节流的思考

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

 _(:з」∠)_)个人理解了一下
  1,比较正式的解释他们的区别:
          防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,防抖注重结果
           节流::是让一个函数无法在很短的时间间隔内连续调用,当上一次执行完之后过了规定的时间间隔,才能进行下一次的函数调用,节流注重过程
  2,非官方解释
          节流:A打了一个B一下,B开始哭(假设哭5分钟),在这5分钟内A一直打,而B就只为哭A打的第一下,其他的从第二次开始,B就像练了金钟罩一样,抗打ƪ(˘⌣˘)ʃ,但是这5分钟过了之后金钟罩没了,需要A重新打一次,让B哭出来才重新生成金钟罩
          防抖:A打B(假设时间点7:00),B在 5五分钟后开始哭(B反射弧太长了)(7:05),如果A距离上一次打B的时间小于5分钟(假设2分钟)(7:02),那么B将在7:07而不是7:05开始哭,如果A每次打距离上一次打都小于5分钟,那么B由此可见会在最后一次打的5分钟后开始哭
  3,应用场景
         防抖:搜索时需要根据输入框中的内容发送ajax请求时
         节流:窗口尺寸大小改变时,滚动到底部事件时
 4,程序实现:
// 防抖
   let time;
   let per = 200; //这个是间隔时间,即事件触发到事件回调开始执行的间隔时间。根据业务需求决定
    function throtting(){
     if(time){
   clearTimeout(time);
time =null;//time不会因为clearTimeout而置为空 } 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 } } }

 

posted @ 2019-08-22 13:27  wangnima666  阅读(300)  评论(0编辑  收藏  举报