Javascript 限制方法调用频率,延时去抖动(debounce)

2020-12-23 1563点热度 0人点赞 0条评论
开发需求1

Web开发搜索功能,需要监听输入框,用户实时输入便启动请求后台搜索结果,但是用户快速输入每一个单词,就触发一次服务器请求,有点浪费资源,且体验不好,做法是等待用户比如500ms后,再进行搜索请求

开发需求2

需要在用户改变浏览器窗口的时候,做一些操作,但是一但用户拖拉窗口,会产生大量的window resize回调,显然不适合每次回调都执行操作,需要等用户停下来才能继续操作

以下是Javascript代码:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
如何调用
var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

window.addEventListener('resize', myEfficientFn);
//or call it manually:
myEfficientFn.apply();
调用的时候带参数
//参数no:
var queryPublicBookFn = debounce(function(no) {
    app.queryPublicBook(no);
}, 300);
//or 
queryPublicBookFn: debounce(function(no) {
    app.queryPublicBook(no);
}, 300)
this.queryPublicBookFn.apply(null,[this.no]);

如果需要限制频率,一段时间内只能执行一次,请看节流:https://blog.terrynow.com/2021/06/21/javascript-limit-frequency-throttle/

 

Java语言通用版本,请看https://blog.terrynow.com/2020/12/21/java-debounce/

Android版本,请看https://blog.terrynow.com/2020/12/22/android-debounce/

Swift版本,请看https://blog.terrynow.com/2020/12/22/ios-swift-debounce/

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论