在实际工作中，我们会经常遇到这样的业务场景，比如点击按钮提交表单，点击一次发一次请求，如果快速点击多次会发送多次请求，这样发送了多次请求是我们不愿意看到的。又比如输入框我们输入内容会调搜索的接口，那么每当我们输入一个字符都会发送一次请求......为了解决类似的困扰，那么节流模式就应运而生了。
// 节流模式的核心思想是创建定时器,延迟程序的执行.
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毫秒内只发一次，这就达到了节流的效果了。