函数节流和函数防抖

1. 概念

函数节流:指定时间间隔内只会执行一次任务;
函数防抖:指任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候任务才会执行;

2. 实现

//函数节流
function throttle(fn, interval){
    let canRun = true;
    return function(){
        if(!canRun) return false;
        canRun = false;
        setTimeout(()=>{
            fn.apply(this, arguments)
            canRun = true;
        },interval)
    }
}
//函数防抖
function debounce(fn, await){
    let timmer = null;
    return function(){
        clearTimeout(timmer);
        timmer = setTimeout(()=>{
            fn.apply(this, arguments)
        }, await)
    }
}

3. 应用场景

函数节流:监听页面滚动要节流
函数防抖:监听input输入要防抖,用户短时间内多次点击同一个按钮。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数节流 还记得上篇文章中说到的图片懒加载吗?我们在文章的最后实现了一个页面滚动时按需加载图片的方式,即在触发滚动...
    柏丘君阅读 7,845评论 1 19
  • 函数防抖和函数节流是在时间轴上控制函数的执行次数 一、函数防抖(debounce)概念:在事件被触发n秒后再执行回...
    puxiaotaoc阅读 3,047评论 0 1
  • 写在前面 在前端开发中,我们知道对于DOM的频繁操作是非常消耗资源的,尤其是对于浏览器的onresize,onsc...
    jeff1804阅读 2,953评论 0 0
  • 我们知道,js有些事件例如resize,mousemove等是会不间断触发的,例如我们简单的一个scroll事件:...
    小小的白菜阅读 1,027评论 0 0
  • 人与人之间的相处,感情占一个什么样的比例呢?在这个相处的过程中,我说不清楚是什么样的感觉,只是理智告诉我,我们不合...
    平平成长说阅读 1,144评论 0 0