例子：拷贝代码，按f12查看打印的数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节流与防抖</title>
</head>
<body>
<button id="a1">提交</button>（模拟表单提交）
<br /><br />
输入框：<input id="b1" type="input" value="" oninput="debounce()"/>（模拟输入框的模糊查询）
</body>
<script>
var a1 = document.getElementById('a1');
var b1 = document.getElementById('b1');
var timer = null;//节流用的定时器
var timer2 = null;//防抖用的定时器
//============================================================================
//节流：
a1.onclick=function(){
if(timer){return false}//定时器存在则走出去，不会执行下面的东西
click();
timer = setTimeout(function(){//setTimeout延时器，过x秒再执行里面的方法，清空延时器
clearTimeout(timer);
timer = null;
},2000)//2秒内只能触发一次，防止多次点击
}
function click(){
console.log('我触发了');
}//模拟触发提交表单的事件
//============================================================================
//防抖：
function debounce(){
clearTimeout(timer);//再次触发方法清空延时器，重新计时
timer2 = setTimeout(function(){//每次触发延长x秒执行，如果x秒内又触发了，会被上一句清空延时器
if(timer2){ //判断过了x秒后如果延时器是否存在
change();//触发的方法
timer2=null;
}
},2000)//2s是为了方便展示，实际应用上1s以下都可以了
}
function change(){
console.log('根据输入内容：'+b1.value+'发送请求给后端拿到查询的数据');
}//模拟发送请求拿到后端数据
//============================================================================
</script>
</html>
防抖的应用：在输入框请求后端的数据的时候。如果没防抖，用户在输入时改变输入框就会发送一次请求，如果加上防抖后只执行用户真正需要的一次。
节流的应用：当多次点击提交表单的时候只在最开始的一次提交，后面x秒内无法提交。防止用户多次提交相同的表单。
704
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
