前端手撕代码——手撕节流throttle

最新推荐文章于 2024-08-10 16:15:00 发布

月下独Coding

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量89

点赞数

分类专栏：前端手写代码文章标签： javascript ecmascript

本文链接：https://blog.csdn.net/Zhouyunfeier/article/details/131269486

版权

前端手写代码专栏收录该内容

22 篇文章 0 订阅

订阅专栏

throttle函数用于在设定的延迟时间内限制函数的执行频率，只保留第一次执行的结果。它常用于优化onscroll、onresize和mouseover等高频事件处理，以控制请求的数量。另一种实现方式是使用定时器，通过clearTimeout确保函数在特定延迟后执行且只执行一次。

摘要由CSDN通过智能技术生成

throttle节流函数
在delay时间内，只保留第一次的执行结果
能够控制请求的数量
适用于onscroll、onresize、mouseover等事件

function throttle(Fn, delay = 500){
    let last = new Date();
    return function(...args){
        let now = new Date();
        if(now - last > delay){
            Fn.apply(this, args);
            last = now;
        }
    }
}

// 使用定时器的写法
function throttle2(fn, delay = 500){
    let timer = null;

    return function(){
        if(timer){
            return;
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay);
    }
}