写在最后啦
问题
鼠标在盒子上移动,鼠标停止之后,500ms后里面的数字就会变化+1;
结构和样式:
<div class="box"></div>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
两个写法:
自己的思路:
一溜下来的,应该算是面向过程吧:
let i = 0;
let timer = null;
document.querySelector(".box").addEventListener("mousemove", () => {
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
document.querySelector(".box").innerHTML = ++i;
}, 500);
});
资料上的:
应该是和Lodash一样的思路吧:
// 获取元素
const box = document.querySelector(".box");
let i = 1;
// 数字处理函数
function mouseMove() {
box.innerHTML = i++;
}
// 防抖函数
function debounce(fn, t = 500) {
let timeId;
return function () {
// 如果有定时器,先清除
if (timeId) clearTimeout(timeId);
// 开启新的定时器
timeId = setTimeout(fn, t);
};
}
// 监听鼠标移动事件
box.addEventListener("mousemove", debounce(mouseMove, 500));
我们可以看到 防抖函数中用return返回的函数,因为addEventListener里面那个事件执行的函数debounce(mouseMove, 500)是先自己执行了再返回的值作为函数执行。
事件里直接执行函数的,直接一个函数名那种,这个debounce(mouseMove, 500)是自己执行了,返回的东西被当做函数执行的,所以是加上return,同时debounce这个外层函数里有个let timeId要被内层函数使用,用闭包好使啊。