<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="height: 1500px;"></div> <script> // 定义:触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间 // 搜索框搜索输入。只需用户最后一次输入完,再发送请求 // 手机号、邮箱验证输入检测 onchange oninput事件 // 窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染 //参数:fn -> 要防抖的函数 wait -> 防抖的时间间隔 immediate ->是否立即执行(true为只执行第一次,false为只执行最后一次) const debounce = (fn,wait,immediate) => { let timer = null; return (...args) => { if(timer) clearTimeout(timer); if(immediate && !timer){ fn.call(this,args); } timer = setTimeout(()=>{ fn.call(this,args); },wait) }; }; const betterFn = debounce(() => console.log("防抖执行了"),3000,true); document.addEventListener("scroll",betterFn); </script> </body> </html>
这里监听的是窗口滚动,已经比较简单的体现出防抖的作用。用到了闭包,理解起来可能会有点绕,仔细想想,应该就能相同其中的原理。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 定义:当持续触发事件时,保证间隔时间触发一次事件 // 1.懒加载、滚动加载、加载更多或监听滚动条位置 // 2.百度搜索框,搜索联想功能 // 3.防止高频点击提交,防止表单重复提交 //参数:fn -> 要实现节流的函数 wait -> 要等待执行的间隔 const throttle = (fn,wait) => { let pre = 0; return (...args) => { let now = Date.now(); if(now - pre >= wait){ fn.apply(this,args); pre = now; } } } window.addEventListener("mousemove",throttle((e) => console.log("触发了节流函数",e),2000)); </script> </body> </html>
这里监听的是window窗口中的鼠标移动,也可以很好的展示节流的作用。原理比防抖函数要更好理解,也用到了闭包。