节流函数（时间戳方式）

最新推荐文章于 2024-07-05 00:58:20 发布

一只可爱乖巧

最新推荐文章于 2024-07-05 00:58:20 发布

阅读量436

点赞数 1

分类专栏：笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_46495397/article/details/124250173

版权

笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个JavaScript节流函数的实现，该函数确保在设定的时间间隔内只执行一次处理函数，用于优化频繁触发的事件处理，如滚动或点击事件。示例展示了如何创建节流函数并应用于按钮点击事件，以限制处理函数的执行频率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//节流函数：连续触发事件时 n秒内只能执行一次处理函数。
    function throttle(fn, delay) {
        let previous = 0;//因为内部函数会调用这个变量，所以在函数执行完之后，这个变量不会被销毁
        return function () {//节流的函数
            let args = arguments;//argument是传入函数的参数
            let now = new Date();
            console.log(this)
            if (now - previous > delay) {
                //   fn.apply(this, args);
                fn()
                previous = now;
            }
        }
    }
    function testThrottle() {
        console.log("需要节流的函数");
    }
    let testThrottleFn = throttle(testThrottle, 2000); // 节流函数
    testThrottleFn('popop', 'pl')
    document.getElementById('btn').onclick = function () {
        testThrottleFn('popop', 'pl')
    }