首先我们先来看看如果一个事件持续频繁触发:
<style>
#itemBox{
background-color: lightgrey;width: 500px;height:300px;
font-size:30px;text-align:center;line-height:300px;
}
</style>
<body>
<div id="itemBox"></div>
</body>
<script>
var item = document.getElementById('itemBox');
var num = 0;
function numAdd(){
num++;
item.innerHTML = num;
}
item.onmousemove = numAdd;
</script>
顺便复习下:
onmousemove:鼠标移动
1、onmouseover、onmouseout:鼠标经过时自身触发事件,经过其子元素时也触发该事件;(父亲有的东西,儿子也有) ,支持冒泡
2、onmouseenter、onmouseleave:鼠标经过时自身触发事件,经过其子元素时不触发该事件。(父亲的东西就是父亲的,不归儿子所有),不支持冒泡
因为鼠标每次移动都会触发onmousemove,所以导致页面的数字变化特别快,这个时候我们就要考虑利用debounce和throttle来节流
debounce防抖
一句话描述:A事件在X秒只触发一次,如果在X秒内又触发该事件,则触发后重置计时器,待X秒后发生该行为,并再次重置计时器,很好理解,防止手抖动持续触发
举个例子:作为班车的调度员,每5分钟发一班车,每次要到5分钟了,又有新乘客要来,然后又得重新等5分钟,等5分钟内没有新乘客,那就发车,否则一直等待不发车,以最后的乘客为标准
debounce具体实现:
var num = 0;
function debounce(func, delay){
var timer;
return function()