Javascript中函数节流与防抖的实现（附代码）-js教程-PHP中文网

Javascript中函数节流与防抖的实现（附代码）

不言

发布： 2018-09-28 15:43:57

转载

2185人浏览过

本篇文章给大家带来的内容是关于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);
            }
        };
    }

登录后复制

函数防抖（debounce）

名词解释

函数防抖（debounce）：空闲时间必须大于或等于一定值的时候，才会执行调用方法

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

使用场景

文本输入keydown 事件
等等...

立即学习“Java免费学习笔记（深入）”；

函数防抖（debounce）简单实现

    function debounce(fn, delay) {
        var timer; // 定时器
        delay || (delay = 250); // 默认空闲时间250ms
        return function() {
            var context = this;
            var args = arguments;
            clearTimeout(timer); // 清除定时器
            timer = setTimeout(function() { // delay时间后，执行函数
                fn.apply(context, args);
            }, delay);
        };
    }

登录后复制

以上就是Javascript中函数节流与防抖的实现（附代码）的详细内容，更多请关注php中文网其它相关文章！