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

JS实现防抖(debounce)及节流(throttle)函数的实现教程

程序员文章站 2022-06-19 21:48:16
这两种函数算是应用场景比较广泛的函数了,那么如何实现它呢? 什么是防抖?什么是节流? 举例来说,比如要搜索某个字符串,基于性能考虑,肯定不能用户没输入一个字符就发送一次搜索请求...

这两种函数算是应用场景比较广泛的函数了,那么如何实现它呢?

什么是防抖?什么是节流?

举例来说,比如要搜索某个字符串,基于性能考虑,肯定不能用户没输入一个字符就发送一次搜索请求,一种方法就是等待用户停止输入,比如过了500ms用户都没有再输入,那么就搜索此时的字符串,这就是防抖;节流比防抖宽松一些,比如我们希望给用户一些搜索提示,所以在用户输入过程中,没过500ms就查询一次相关字符串,这就是节流。

实现这两种方法的核心其实都是settimeout方法。

防抖的实现思路:每次触发事件时都取消之前的延时调用方法:

function debounce(fn, delay) {
    let handle;
    return function (e) {
        // 取消之前的延时调用
        cleartimeout(handle);
        handle = settimeout(() => {
            fn(e);
        }, delay);
    }

}

测试:

function sayhi(e){
    console.log(e.target.innerwidth, e.target.innerheight);
}
window.addeventlistener('resize', debounce(sayhi, 500));

效果:

JS实现防抖(debounce)及节流(throttle)函数的实现教程

节流的实现思路:每次触发事件时都判断当前是否有等待执行的延时函数:

function throttle(fn, delay) {
    let runflag = false;
    return function (e) {
        // 判断之前的调用是否完成
        if (runflag) {
            return false;
        }
        runflag = true;
        settimeout(() => {
            fn(e);
            runflag = false;
        }, delay)
    }
}

测试:

function sayhi(e){
    console.log(e.target.innerwidth, e.target.innerheight);
}
window.addeventlistener('resize', throttle(sayhi, 500));

效果:

JS实现防抖(debounce)及节流(throttle)函数的实现教程

推荐成熟的库方法:lodash