js防抖函数

1、使用场景:

  例如:搜索框搜索输入。只需用户最后一次输入完,再发送请求

2、函数防抖的要点

  需要一个 setTimeout 来辅助实现,延迟运行需要执行的代码。如果该方法多次触发,则把上次记录的延迟执行代码用 clearTimeout 清掉,重新开始计时。若计时期间事件没有被重新触发,等延迟时间计时完毕,则执行目标代码。

3、防抖函数如下:

/**
* fn:需要被防抖执行的函数
* wait :防抖的间隔时间,即函数在多少时间后执行,单位ms
*/

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}

4、防抖函数使用方法:

/**
*toSearch():需要执行的函数,例如此处是笔者写的toSearch()搜索函数,给toSearch()搜索函数加防抖
*/
debounce(toSearch(), 1000)

 

posted @ 2023-02-01 17:34  莫颀  阅读(2515)  评论(0编辑  收藏  举报