函数防抖和节流

今天晚上听了函数防抖与节流,记录一下。

防抖(debounce)


  • 如果下达该命令后,在t毫秒内再次下达该命令,则取消刚刚下达的命令,只执行新命令
  • 最终效果: 对于连续动作(动作间的时间间隔小于t),以最后一次为准

代码如下:

function debounce(fn, wait) {
    let timer = null
    return function() {
        if(timer) 
            clearTimeout(timer)
        timer = setTimeout(() => fn.apply(this, arguments), wait)
    }
}

let fn = () => console.log('这里只执行很少次')
fn = debounce(fn, 1000)

document.body.onscroll = fn

节流(throttle)

function throttle(fn, gapTime) {
    let lastTime = null
    let nowTime = null
    return function() {
        nowTime = Date.now()
        if(!lastTime || nowTime - lastTime > gapTime) {
            fn()
            lastTime = nowTime
        }
    }
}

let fn = () => console.log('我执行了')
fn = throttle(fn, 1000)

document.body.onscroll = fn

范例如下:
输入文字,用防抖与节流分别对其进行保存。
http://js.jirengu.com/bucularili/1/edit?html,js,output

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

推荐阅读更多精彩内容

  • 在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等...
    Grace_feb3阅读 401评论 0 0
  • 在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等...
    淘淘笙悦阅读 226,470评论 42 349
  • 本文摘自这里,通俗易懂。防抖和节流在前端和客户端开发中经常会用到,而且适用场景还挺多,大多数成熟的第三方库都有提供...
    nuannuan_nuan阅读 856评论 0 1
  • 在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等...
    meng_281e阅读 196评论 1 0
  • 【看图写诗】 背景:风景。 说明:1,首先请在评论区写诗;2,在自己主页更文,题目随意,请配上这幅图;3,末尾本文...
    2020号阅读 1,016评论 90 30