函数节流-防抖函数

函数节流

一个函数执行一次后，只有大于设定的执行周期才会执行第二次，防止高频率的多次执行

情景：

监听页面滚动时，输出‘我滚动了’，处于优化性能考虑，不希望每次事件触发时就输出，而是在触发的情况下每隔200ms执行一次。

 1 /* 
 2     节流函数
 3     @param fn 要被节流的函数
 4     @param delay 规定的间隔时间
 5     */
 6 function throttle(fn, delay) {
 7     var lasttime = 0; //上次执行的时间
 8     return function () { //此处用闭包，就是为了记录lasttime，lasttime不会马上被销毁，也不会重新被声明赋值
 9         var nowtime = Date.now();//本次执行的时间
10         if (nowtime - lasttime > delay) { //本次减上次时间大于delay时执行fn
11             fn.call(this); //修正this指向问题
12             lasttime = nowtime; //执行完fn后，重新赋值lasttime
13         }
14     }
15 }
16 // onscroll右边的值必须是个函数，刚好throttle()调用后的返回值是return后的函数
17 window.onscroll = throttle(function () {
18     console.log('我滚动了')
19 }, 200);

防抖函数

一个需要频繁处罚的函数，在规定的时间内，只让最后一次生效，前面的不生效。

情景：

重复点击某个按钮，最快的二次点击为300ms

 1 function debounce(fn, delay) {
 2     var timer = null;//记录上次的延时器
 3     return function () {  //此处用闭包，为了记录timer
 4         clearTimeout(timer); //清除上次的计时器
 5         timer = setTimeout(function () { //重新赋值本次得延迟点击
 6             fn.apply(this);  //执行fn,修正this指向问题
 7         }, delay);  
 8     }
 9 }
10 
11 // onclick右边的值必须是个函数，刚好throttle()调用后的返回值是return后的函数
12 document.querySelector('#button').onclick = throttle(function(){
13     console.log('我点击了')
14 },1000);

总结

节流函数就是执行第一次，指定时间后才会执行第二次

防抖函数就是在指定时间内，只执行最后一次，缺点就是会被延迟执行

点击按钮发起请求时，特别要注意，防止用户重复点击。

具体用哪个好，视情况而定吧。

奔跑的蜗牛