防抖和节流

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次触发，则重新计算事件

• 思路
  每次触发的时候取消之前的延时调用方法，以当下为准

1//防抖
2function debounce(fn){
3    let timeout = null;
4    return function(){
5        clearTimeout(timeout);
6        timeout = setTimeout(()=>{
7            fn.apply(this,arguments);
8        },500)
9    }
10}
11
12function sayHello(){
13    console.log("你好，防抖成功");
14}
15
16input = document.getElementById('inp')
17input.addEventListener('input',debounce(sayHello)) 

但是以上方法的话 是以第一次执行为准，还可以添加判断，控制直接触发还是最后触发

1const deb = (fn, delay, immediate) => {
2    let timer = null
3    return function() { 
4        const context = this
5        timer && clearTimeout(timer)
6        if (immediate) {
7            !timer && fn.apply(context, arguments)
8        }
9        timer = setTimeout(() => {
10                       fn.apply(context, arguments)
11                }, delay)
12    }
13} 

节流

触发高频事件后n秒内只执行一次，只有第一次执行结束才会执行第二次，从而稀释函数的执行频率

• 基本思路 执行之前判断是否有有等待执行的延时函数，有：本次调用不执行，否则执行

1//节流
2//此方法的弊端 如果是异步函数无法执行
3function throttle(fn){
4    //通过闭包保存一个标记
5    let canRun = true;
6    return function(){
7        //在函数开头判断标记是否为true，不为true则return
8        if(!canRun){return;}
9        //进入执行 标志重置为false
10        canRun = false;
11        setTimeout(()=>{
12            fn.apply(this,arguments);
13            //函数执行后设置为true 可以继续执行函数
14            canRun = true;
15        },500)
16    }
17}
18  function sayHi(e) {
19      console.log(e.target.innerWidth, e.target.innerHeight);
20    }
21    window.addEventListener('resize', throttle(sayHi)); 

本文转自 https://www.jianshu.com/p/ccb6668cef09，如有侵权，请联系删除。