防抖（debounce）

1.时间限制范围内不触发事件，执行事件

2.时间限制范围内触发事件从辛计时

function debounce(fn, delay){
let timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn, delay)
}
}


//防抖debounce代码：
function debounce(fn, delay) {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function () {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        },delay);
    };
}

节流（throttle）

函数在时间限制范围内只执行一次

function throttle(fn, delay){
let flag = true
return function(){
if(!flag) return
flag = flase
setTimeout(function(){
fn()
flag = true
},delay)
}
}


//节流throttle代码：
function throttle(fn) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, 500);
    };
}

使用时间戳的方式

  function throttle(fn, delay){
             var begin = 0
             return function(){
                 var cur = new Date().getTime()
                 console.log(begin, cur)
                 if(cur - begin > delay){
                     fn.apply(this, arguments)
                     begin = cur
                 }
             }
        }

节流与防抖

防抖（debounce）

节流（throttle）