函数防抖和函数节流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>函数防抖和节流</title> </head> <style> .float { float: left; width: 200px; height: 200px; border: 1px solid; margin: 5px; } </style> <body> <div class="float" id="one"> 没有处理 <div id="div1"></div> </div> <div class="float" id="two"> 函数节流 <div id="div2"></div> </div> <div class="float" id="there"> 函数防抖 <div id="div3"></div> </div> </body> <script> // 没有处理 var one = document.getElementById('one'); one.onmousemove = function (ev) { getxy(ev, 'div1'); } // 函数节流 var two = document.getElementById('two'); var tirm = true; two.onmousemove = function (ev) { if (!tirm) { return; } tirm = false; setTimeout(() => { tirm = true; getxy(ev, 'div2'); }, 1000) } // 函数防抖 var there = document.getElementById('there'); var setstate = false; there.onmousemove = function (ev) { clearTimeout(setstate); setstate = setTimeout(() => { getxy(ev, 'div3'); }, 1000); } // 获取坐标 function getxy(ev, id) { document.getElementById(id).innerHTML = `x:${ev.offsetX},y:${ev.offsetY}`; } </script> </html>
可以复制上面的代码,打开页面运行,将鼠标在不同的div上移动看到不同的效果,可以清楚的看到三者区别。