一、过滤掉重复的滚动事件
浏览器中滚动条在滚动的时候都会触发滚动事件，触发频率很高，但是我们在实际场景中没必要相应这么高的频率；因此需要用函数节流来节省性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>函数节流</title>
</head>
<body>
<h1 style="height:2000px;">你好世界</h1>
<script type="text/javascript">
document.addEventListener('scroll',throttle(fn))
function fn(arg) {
console.log(arg)
}
function throttle(func,arg,delay=600) {
let lock = false
// arg是一个事件对象，也可以传入其他的参数
return (...arg) => {
if(lock) {return}
func(...arg)
lock = true
setTimeout(()=> {lock = false},delay)
}
}
</script>
</body>
</html>
二、过滤掉重复的验证事件(用户输入停止后300ms触发验证)
function throttle(func,delay =300, I=null) { // 这里的args是事件对象Event，也可以传入一个值 return (...args) =>{ // clearInterval(I) 每次用户在按之前先把之前的定时器给清除掉 clearInterval(I) I = setTimeout(func.bind(null,...args),delay) // 上面这条代码使用ES6写，比较简便一点 // I = setTimeout((...args) => func(...args),delay) } }