欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

节流和防抖

程序员文章站 2022-06-02 17:26:14
...

节流和防抖

作用:均是为节约计算机资源而生,也就是归属于优化方面
原理:均使用setTimeout来存放待执行的函数,很方便的利用它的延时机制来确定合适的函数触发时机。

节流

定义:指定时间间隔内只能执行一次任务
场景:懒加载图片加载的时候,scroll滚动条的判断时机

实现:

function throttle(fn, interval) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false
        setTimeout(() => {
            fn.apply(this, arguments)
            canRun = true
        }, interval)
    }
}
防抖

定义:任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行,它的计时有一个更新
场景:用户名输入时的判断

实现:

function debounce(fn, interval) {
    let timeout = null;
    return function () {
        clearTimeout(timeout)//清除前一次触发的时间
        timeout = setTimeout(() => {
            fn.apply(this, arguments)
        }, interval)
    }
}

结束!

相关标签: 优化