常州网络公司主营业务太原网站制作优化seo公司
方法1：利用lodash库提供的防抖来处理
方法2：手写一个防抖函数来处理
需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字才会变化+1
方法一：利用lodash库实现防抖
<!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><style>.box{width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head>
<body><script src="./js/lodash.min.js"></script><div class="box"></div><script>// 利用防抖实现性能优化// 需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字就会变化+1const box = document.querySelector('.box')let i = 1function mouseMove(){box.innerHTML = i++}// mousemove鼠标移动事件// 鼠标一移动就500ms后就触发debounce事件，i就++// _.debounce语法(fun,时间)box.addEventListener('mousemove', _.debounce(mouseMove,500))</script>
</body>
</html>方法二： 手写一个防抖函数来处理
思路：
核心是利用setTimeout定时器来实现
1声明定时器变量
2每次事件触发时都要先判断是否有定时器，如果有先清除以前的定时器
3如果没有定时器则开启定时器存入到定时器变量里面
4定时器里面写函数调用
<!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><style>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head><body><div class="box"></div><script>// 利用防抖实现性能优化// 需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字就会变化+1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++}// 手写防抖函数// 核心是利用setTimeout定时器来实现// 1声明定时器变量// 2每次事件触发时都要先判断是否有定时器，如果有先清除以前的定时器// 3如果没有定时器则开启定时器存入到定时器变量里面// 4定时器里面写函数调用function debounce(fn,t){let timer//return返回一个匿名函数return function(){if(timer) clearTimeout(timer)timer = setTimeout(function(){fn() //加小括号调用fn函数}, t)} }box.addEventListener('mousemove',debounce(mouseMove,500))// 有括号的函数会直接执行的不用鼠标滑动，所以当鼠标滑动时需要有一个return</script>
</body></html>