[摘要]本篇文章给大家带来的内容是关于Javascript中函数节流与防抖的实现(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。函数节流(throttle)名词解释函数节流(thr...
本篇文章给大家带来的内容是关于Javascript中函数节流与防抖的实现(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
函数节流(throttle)
名词解释
函数节流(throttle):连续执行函数,每隔一定时间执行函数
使用场景
鼠标移动,mousemove 事件
DOM 元素动态定位,window对象的resize和scroll 事件
等等...
函数节流(throttle)简单实现
    function throttle(fn, delay) {
        var last; // 上次执行的时间
        var timer; // 定时器
        delay    (delay = 250); // 默认间隔为250ms
        return function() {
            var context = this;
            var args = arguments;
            var now = +new Date(); // 现在的时间
            if (last && now < last + delay) { // 当前距离上次执行的时间小于设置的时间间隔
                clearTimeout(timer); // 清除定时器
                timer = setTimeout(function() { // delay时间后,执行函数
                    last = now;
                    fn.apply(context, args);
                }, delay);
            } else { // 当前距离上次执行的时间大于等于设置的时间,直接执行函数
                last = now;
                fn.apply(context, args);
            }
        };
    }