防抖节流的封装

一.函数的防抖 - 封装函数实现。

1. 概念：函数防抖（debounce）：当事件被触发一段时间后再执行事件，如果在这段时间内事件又被触发，则重新计时。
2. 过程：在事件触发时开始计时，在规定的时间内，若再次触发事件，将上一次计时清空，然后重新开始计时。保证只有在规定时间内没有再次触发事件之后，再去执行这个事件。
3. 生活中的实例： 如果有人进电梯，那电梯将在5秒钟后出发，这时如果又有人进电梯了，我们又得等5秒再出发（重新计时）。
4. 思路： 封装函数实现 以后遇到高频事件，不是直接使用事件处理函数，利用封装的函数去调用事件处理函数。

function thing(e) { //真正要调用的事件处理函数
    console.log(e || event); //undefined
    console.log(this); //指向元素对象
    console.log('事件被触发了，可以观察次数');
}
function debounce(fn, time) { //fn真正你要调用的事件处理函数。 time延迟执行的时间(200ms/300ms/400ms)
    let t = null; //接收定时器的返回值
    return function() { //调用debounce返回的函数，变成了现在的事件处理函数(拥有事件对象和this)
        clearTimeout(t);
        t = setTimeout(() => {
            // 解决方式：将fn函数的this指向debounce返回的函数
            // fn.call(this, arguments[0]); //arguments指向返回函数的第一个参数(事件对象)
            fn.apply(this, arguments);
        }, time);
    };
}

二.函数的节流

1. 概念：函数节流throttle指定时间间隔内，若事件被多次触发，只会执行一次.
2. 过程：在事件触发之后开始计时，在规定的时间内，若再次触发事件，不对此事件做任何处理，保证在规定时间内只执行一次事件。
3. 实例： 英雄联盟中每次使用闪现后都需要冷却时间结束后才能再次使用一样

function thing(e) { //真正要调用的事件处理函数
    console.log(this);
    console.log(e || event);
    console.log('事件被触发了，可以观察次数');
}
function throttle(fn, time) {
    // 设置初始时间：
    let sTime = 0;
    return function() {
        // 设置当前时间
        let cTime = new Date().getTime(); //获取1970-1-1离当前时间的毫秒数
        if (cTime - sTime >= time) { //触发
            fn.apply(this, arguments);
            sTime = cTime;
        }
    }
}
inp.oninput = throttle(thing, 1000);