(先设置一个点击的盒子)
<style>
.mydiv {
width: 100px;
height: 100px;
background-color: rgb(233, 131, 131);
}
</style>
</head>
<body>
<div class="mydiv"></div>
</body>
防抖:
防抖思想:如果高频法,设置一个定时器,如果在这个时间内如果再次触发事件,
就清除前一次事件的时间,以后面一次的时间再重新计时,直到在定时器设置的时间内没有再触发事件,那么定时器才会执行事件。
(如果一直触发,就不会执行,只要等到指定时间内没有再触发事件了,才会执行)
let mydiv = document.querySelector('.mydiv');
mydiv.addEventListener('mousemove', move(fn,500))
function move(f,time) {
let tid=0;
return function(){
if(tid){
clearTimeout(tid)
}
tid=setTimeout(function(){
f()
},time)
}
}
function fn() {
console.log('1')
}
节流
节流思想:如果高频发,那么在规定时间内,就只会执行一次。
(如果一直触发,那么在规定的时间内,只会执行一次,不管触发多少次,规定时间只会执行一次)
let mydiv = document.querySelector('.mydiv');
mydiv.addEventListener('mousemove', move(fn, 1000))
function move(f, time) {
let working = false;
return function () {
if (working) {
return;
}
working=true;
setTimeout(function () {
f()
working=false;
}, time)
}
}
function fn() {
console.log('鼠标滑动')
}