防抖节流

// 防抖
// 也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间
// 那么防抖的情况下只会执行一次。
function debounce(fn, wait) {
    var timeout = null;
    return function() {
        if (timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(function() {
            fn.apply()
        }, wait);
    }
}
// 处理函数
function handle() {
    console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

// 节流
// 假设一个用户一直触发这个函数，且每次触发小于既定值，
// 函数节流会每隔这个时间调用一次
function throttle(fn,delay) {
    // 方法1 定时器
    var timeout = null;
    return function() {
       if (!timeout) {
            timeout = setTimeout(function() {
           　　 fn();
            　　timeout = null;
        　　}, delay);
    　　}
　　}
    // 方法2 时间戳
    var prev = Date.now();
    return function() {
        var now = Date.now();
        if (now - prev >= delay) {
            fn.apply();
            prev = Date.now();
        }
    }
}
// 处理函数
function handle() {
    console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', throttle(handle, 1000));
// 用一句话总结防抖和节流的区别：
// 防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

// 使用场景：
// 节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
// 防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。