防抖与节流

最新推荐文章于 2025-05-22 10:02:06 发布

前端小白龙

最新推荐文章于 2025-05-22 10:02:06 发布

阅读量136

点赞数

文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/ghjcduhvfyjhbf/article/details/104866929

版权

防抖

防抖是在n秒内某个函数只执行一次，如果n秒内重新触发则重新计算

输入后过wait毫秒再查询(延迟查询)

funciton debounce(func, wait){
    let timeout;
    return function(){
        if(timeout) clearTimeout(timeout);
        timeout = setTimeout(function(){
            func.apply();
        }, wait);
    }
}

2. 输入后立即查询，然后过wait秒才能查询(立即查询)

function debounce(func, wait){
    let timeout;
    return function(){
        if(timeout) clearTimeout(timeout);
        let callnow = !timeout;
        timeout = setTimeout(function(){
            timeout = null;
        }, wait);
        if(callnow) func.apply();
    }
}

节流

节流是连续发生的事件在一定时间内只执行一次函数

1.定时器固定时间发请求

function throttle(func, wait){

    let timeout;
    return function(){
        if(!timeout){
            timeout = setTimeout(functin(){
                timeout = null;
                func.apply();
            },wait);
        }
   }
}

2.使用时间戳的方式实现节流

function throttle(func, wait){
    let prev = 0;
    return function(){
        let now = Date.now();
        if(now - prev > wait){
            func.apply();
            prev = now;
        }
    }
}