我们了解了函数防抖与函数节流的思路后，我们现在来将他们封装起来，提高代码复用性。
今天直接上菜
cb 要处理防抖的函数
time 默认的高频间隔时间
isStart 是否在头部执行
函数防抖封装：调用debounce 函数，返回一个处理过防抖的函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { width: 300px; height: 400px; background: red; } </style> </head> <body> <div id="box"></div> <script> function debounce(cb,delay = 200,isStart = false){ let timer = 0; let isFirst = true; //是否是第一次执行 return function(...arg){ clearTimeout(timer); if(isFirst&&isStart){ cb.apply(this,arg); isFirst = false; } timer = setTimeout(()=>{ (!isStart)&&cb.apply(this,arg); isFirst = true; },delay) } } box.onmousemove = debounce((e)=>{ console.log(1); },200,true); </script> </body> </html>