js 防抖节流

最新推荐文章于 2024-06-10 22:52:06 发布

别搞花里胡哨的

最新推荐文章于 2024-06-10 22:52:06 发布

阅读量300

点赞数

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_41223530/article/details/122236682

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.防抖

/**
 * 防抖
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 *
 * 例如:
 * test(){
      console.log(1111)
    }
 * 使用:Debounce(this.test)
 */
let timeout;

export function Debounce(func, wait = 500, immediate = false) {
    if (timeout !== null) clearTimeout(timeout);
    if (immediate) {
        let callNow = !timeout
        timeout = setTimeout(() => {
            timeout = null
        }, wait);
        if (callNow) typeof func === 'function' && func();
    } else {
        timeout = setTimeout(() => {
            typeof func === 'function' && func()
        }, wait)
    }
}

2.节流

/**
 * 节流
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
let timer, flag;

export function throttle(func, wait = 500, immediate = true) {
    if (immediate) {
        if (!flag) {
            flag = true
            typeof func === 'function' && func()
            timer = setTimeout(() => {
                flag = false
            }, wait)
        }
    } else {
        if (!flag) {
            flag = true
            timer = setTimeout(() => {
                flag = false
                typeof func === 'function' && func()
            }, wait)
        }
    }
}