在实际工作中,我们会经常遇到这样的业务场景,比如点击按钮提交表单,点击一次发一次请求,如果快速点击多次会发送多次请求,这样发送了多次请求是我们不愿意看到的。又比如输入框我们输入内容会调搜索的接口,那么每当我们输入一个字符都会发送一次请求......为了解决类似的困扰,那么节流模式就应运而生了。
// 节流模式的核心思想是创建定时器,延迟程序的执行. var throttle = function f() { arguments.slice = Array.prototype.slice; var fn,params=[]; //如果第一个参数是boolean类型那么第一个参数表示清除定时器 if(typeof arguments[0] === 'boolean') { //第二个参数为函数 fn = arguments[1]; //函数的计时器句柄存在,清除该定时器 fn.__throttleID && clearTimeout(fn. __throttleID); //工作计时器延迟执行函数 } else { fn = arguments[0]; params = arguments.slice(1); f(true,fn); //为函数绑定句柄函数 fn.__throttleID = setTimeout(function() { //执行函数 fn.apply(null, params); }, 500) } }
下面让我们开尝试调用一下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="inputDom"/> </body> </html> <script type="text/javascript"> var content = document.getElementById('inputDom'); function press() { console.log("开始输入了"); } content.onkeyup = function (){ throttle(press,1,2,3); } </script>
可以看到,当连续输入内容,在500毫秒内只发一次,这就达到了节流的效果了。