首页 > 代码库 > 使用限制函数执行频率的函数代理
使用限制函数执行频率的函数代理
使用代理限制函数的调用频率
假设一个经典的CURD页面上,要做一个Ajax异步查询功能。
放一个查询按钮,点击查询,系统会到远程服务端请求数据,一秒之后返回查询结果。
很快,功能实现了!
但假如用户一秒内点击了三次查询,会发生什么?
为了解决这个问题,我们可能会在用户点击查询之后禁用查询按钮,或者在处理查询时上锁,返回结果后再把锁放开。
很好,做到这里,已足够日常使用。
这里只解决了一个问题:按钮的点击。而输入框的输入、选择框的变化、鼠标的移动、滚轮的滚动,这些事件触发频率高的问题怎么解决?
为了综合考虑,不重复自己,一个解决方案诞生了:使用限制函数执行频率的函数代理。
该函数API看起来跟setTimeout以及Promise很有点像,确实,但略形式上有差异。
打算把它向推荐到ES6,可惜前端事件发的String Padding API被防火墙拦回来好几次了。
唉!只能在博客中说说。
函数
/** * 为函数创建一个带帧速控制的代理函数 * 包含末尾的细节处理 * 注:此函数适用于调用间隔大于1ms的情形 * @static * @method getFPSLimitedFunction * @param {Function} accept - 指定的函数 * @param {Number} [fps=0] - 每秒最多执行的次数。(设interval为时间间隔毫秒数,该值等效于1000/interval) * @param {Function} [reject=null] - 拒绝执行时的回调。 * @returns {Function} agent - 代理函数 * @throws {TypeError} called_non_callable - 若accept不是function时则抛出该错误 */ function getFPSLimitedFunction(accept,reject,fps){ if(typeof accept!=="function"){ throw new TypeError(accept+" is not a function"); } if(typeof reject!=="function"){ reject=null; } fps>>>=0; var delay=Math.max(0,1000/fps), locked=false, timer=0, rejectedQueue=[], lastAcceptedTime=0, lastRejectedTime=0; var lock=function(){ locked=true; }; var unlock=function(){ locked=false; clearTimeout(timer); timer=setTimeout(checkRejectedCalls,delay); }; var checkRejectedCalls=function(){ if(lastAcceptedTime<lastRejectedTime){ var l=rejectedQueue.length, i, call; if(l>0){ if(typeof reject==="function"){ for(i=0;i<l-1;i++){ call=rejectedQueue[i]; try{ reject.apply(call[0],call[1]); }catch(e){ setTimeout(function(){throw e;},0); } } } call=rejectedQueue[l-1]; try{ accept.apply(call[0],call[1]); }catch(e){ setTimeout(function(){throw e;},0); } } } rejectedQueue.length=0; }; var handleRejectedCalls=function(){ if(typeof reject==="function"){ var l=rejectedQueue.length, i, call; for(i=0;i<l;i++){ call=rejectedQueue[i]; try{ reject.apply(call[0],call[1]); }catch(e){ setTimeout(function(){throw e;},0); } } } rejectedQueue.length=0; }; var agent=function(){ if(locked){ lastRejectedTime=Date.now(); rejectedQueue.push([this,arguments]); return; } clearTimeout(timer); handleRejectedCalls(); lock(); lastAcceptedTime=Date.now(); accept.apply(this,arguments); setTimeout(unlock,delay); }; agent.toString=function(){return accept.toString();}; if(accept.toSource){ agent.toSource=function(){return accept.toSource();}; } return agent; }
用例
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // demo1 限制事件监听函数调用频率 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //为document添加鼠标移动事件监听,监听每秒最多执行25次 var document_mousemoveHandler=getFPSLimitedFunction(function(event){ //TODO 处理鼠标移动 },null,25); document.addEventListener("mousemove",document_mousemoveHandler); //为查询按钮添加点击事件监听,监听每秒最多执行1次 var button_clickHandler=getFPSLimitedFunction(function(event){ //TODO 查询数据 },null,1); document.querySelector("#searchButton").addEventListener("click",button_clickHandler); //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // demo2: 为document添加鼠标移动事件监听,监听每秒最多执行60次 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //demo2 function doSomethingWithIntervalAndTimes(something,interval,times){ var count=0; var timer=setInterval(function(){ count++; if(count>=times){ clearTimeout(timer); } something(count,times); },interval); return timer; } //1秒最多接受一次 var showMessage=getFPSLimitedFunction( function accept(s){//接受业务 console.log("accepted: "+s); }, function reject(s){//处理被拒绝 console.warn("rejected: "+s); }, 1 ); //每秒隔100ms一次(10fps),理论上每秒1次被接受,9次被拒绝 doSomethingWithIntervalAndTimes(function(currentCount,repeatCount){ showMessage(currentCount); },100,100);
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。