05 函数节流

1 普通

基于操作的节流（也被称为防抖）

// 定义函数
function demo() {
    console.log('window scroll');
}

// 实现防抖器
function antiShake(fn) {
    // 清除定时器
    //延迟200毫秒，在这期间内再次触发了事件，就终止之前的函数执行，重新计时
    clearTimeout(fn.__timebar);
    // 延迟执行函数
    fn.__timebar = setTimeout(function() {
        // 执行回调函数
        fn();
    }, 200)
}

// 使用防抖器
window.onscroll = function() {
    // 防抖了，（基于操作的节流）
    antiShake(demo);
}

最后一次触发事件时执行

基于时间的节流

// 定义函数
function demo() {
    console.log('window scroll');
}

// 封装节流器
function throttle(fn) {
    // 判断开关
    if (fn.__lock) {
        // 如果打开了，中断执行
        return;
    }
    // 开发开关
    fn.__lock = true;
    // 执行函数
    fn();
    // 经过一段时间，关闭开关
    setTimeout(function() {
        // 关闭开关
        fn.__lock = false;
    }, 1000)

}

2 增强

节流器：触发操作,让程序延迟执行,清除还没有执行的操作

按操作节流（防抖）,在规定时间内，重复执行的时候，取消前一次执行，执行当前的操作。

例如：对icon浮层的优化 对返回顶部的优化  

    // 可以传递第二个参数 data 是一个布尔值 当传递是true的时候 希望关闭延时器
    function throttle(fn, data)         
        // 直接清除延时器
        clearTimeout(fn.__throttle);

        if (data !== true) {
            // 配置对象
            var data = data || {
                // 上下文
                context: null,
                // 传递的参数
                args: [],
                // 延时器的时间
                time: 500
            };

            // 开启延时器
            fn.__throttle = setTimeout(function() {
                fn.apply(data.context, data.args)
            }, data.time)
        }
    }

    // 显示
    function show() {
        img.style.display = 'block';
    }
    // 隐藏
    function hide() {
        img.style.display = 'none';
    }

    // 当鼠标进入的时候 显示图片
    box.onmouseenter = function() {
        // 使用节流器
        throttle(show);

        // 将离开时候的延时器关闭！！！
        throttle(hide, true);
    }
    // 当鼠标离开的时候 隐藏图片
    box.onmouseleave = function() {
        // 使用节流函数 传递参数控制隐藏的时间
        throttle(hide, {
            time: 500
        })
    }

按时间节流，在规定时间内，只允许执行一次。

例如：监听页面滚动事件

    // 封装一个节流器 基于时间的操作
    function throttle(fn, context, args, time) {
        // 判断锁的状态
        if (fn._lock) {
            // 终止执行
            return;
        }
        // 开锁一次
        fn._lock = true;

        // 执行函数
        fn.apply(context, args);

        // 每间隔time关闭一次锁
        setTimeout(function() {
            // 关闭锁
            fn._lock = false;
        }, time || 500)
    }

     // 定义函数
    function demo() {
        console.log('success', this, arguments);
    }

    // 监听页面滚动
    document.onscroll = function() {
        // 使用节流函数
        throttle(demo, document, [100, true, 'abc'], 2000);
    }