一、过滤掉重复的滚动事件
浏览器中滚动条在滚动的时候都会触发滚动事件,触发频率很高,但是我们在实际场景中没必要相应这么高的频率;因此需要用函数节流来节省性能。
<!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) } }