<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrap {
height: 100%;
}
.box {
width: 100%;
height: 100%;
}
.one {
background: lightblue;
}
.two {
background: lightcoral;
}
.three {
background: lightgreen;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
1、防抖：
在连续性事件发生的时候，只允许最后一次事件触发函数。
2、节流：
控制函数执行的频率，也就是在一定的时间内只执行一次。
*/
document.onmousemove = function(e) {
// console.log('鼠标移动：', e);
}
// 防抖
var timer = null;
document.onscroll = function(e) {
clearTimeout(timer);
timer = setTimeout(function() {
console.log(e);
}, 100);
}
// 节流
// var startTimer = new Date().getTime(); // Date.now()
// document.onscroll = function(e) {
// var currentTime = new Date().getTime();
// if(currentTime - startTimer > 1000) {
// console.log(e);
// startTimer = new Date().getTime();
// }
// }
</script>
本文暂时没有评论，来添加一个吧(●'◡'●)