要求:鼠标在盒子上移动,不管移动多少次,每隔500ms才+1
1、lodash提供的节流函数:
2、手写节流函数:
防抖:检测前面有无定时器,有就清除前面的定时器,如果鼠标一直移动,一直清除之前的,直到最后一次移动,调用函数debounced,过500ms后调用函数mouseMove
节流:如果之前有定时器,不做处理,没有定时器,则开启定时器,500ms后调用函数mouseMove,如果鼠标一直移动,在500ms期间内不再开启下一个定时器,直到500ms结束。时间到了,执行完mouseMove中加1操作,才清空定时器,下一次触发事件,才可以再开一个定时器,过500ms后调用mouseMove。
<script>
const div = document.querySelector('.box')
let i = 1
function mouseMove() {
div.innerHTML = i++
}
// 60000ms为60s
div.addEventListener('mousemove', _.throttle(mouseMove, 60000))
</script>
<script>
const div = document.querySelector('.box')
let i = 1
function mouseMove() {
div.innerHTML = i++
}
function throttle(fun, time) {
let timeId = null
// 返回一个匿名函数
// 没有定时器就开启定时器
return function () {
if (!timeId) {
//局部作用域
timeId = setTimeout(function () {
fun()
// 调用完fun 数字加一后 让timeId重新为null
timeId = null
}, time)
}
}
}
// 60000ms为60s
div.addEventListener('mousemove', throttle(mouseMove, 500))
</script>
但自己手写的这个,第一次触发也是要过500ms,即要过500ms才显示1;而lodash中的节流函数是立刻显示1,然后500ms内不管怎么动都是1
let id = setTimeout(function () {
console.log(456)
}, 1000)
clearTimeout(id)
setTimeout(function () {
console.log(id)
}, 2000)
// console.log(id) js执行机制 会先清除定时器 然后输出id 最后执行定时器 但此时已被关闭不会输出456
清空定时器(js执行机制,先清空定时器,才执行定时器的,所以不执行了,不输出456),id未被清空
清除定时器后,timer未被清除,看控制台,输出1