开发需求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/
文章评论