防抖
事件处理函数在一定时间后才执行,如果这段时间再次调用,则会重新计算时间,如果超出预定时间没有调用,则执行事件函数
<style>
#container{
height: 200px;
background-color: rgb(119, 115, 110);
color: white;
text-align: center;
line-height: 200px;
}
</style>
<div id="container"></div>
<script>
// 演示事件是如何频繁发生的
let container=document.querySelector('#container');
let count=1;
function doSomeThing(event){
container.innerHTML=count++;
console.log(this);
console.log(event);
}
// 鼠标在container中移动触发事件
container.onmousemove=debounce(doSomeThing,1000);
// 封装防抖函数
function debounce(fun,wait){
let timeout;
return function(){
let context=this;
let argus=arguments;
// 每次触发前先清除之前的定时器,重新计时
clearTimeout(timeout);
// setTimeout(要执行的代码, 等待的毫秒数)
timeout=setTimeout(function(){
fun.apply(context,argus);
},wait)
}
}
</script>
节流
如果持续触发事件,每隔一段时间,执行一次事件
<style>
#container{
height: 200px;
background-color: rgb(119, 115, 110);
color: white;
text-align: center;
line-height: 200px;
}
</style>
<div id="container"></div>
<script>
// 演示事件是如何频繁发生的
let container=document.querySelector('#container');
let count=1;
function doSomeThing(event){
container.innerHTML=count++;
console.log(this);
console.log(event);
}
// 鼠标在container中移动触发事件
container.onmousemove=throttle(doSomeThing,1000);
// 封装节流函数
// 方法一:时间戳
function throttle(fun,wait){
let old=0;
return function(){
let context=this;
let argus=arguments;
// 获取当前的时间戳
// valueOf() 方法返回 Math 对象的原始值
let now=new Date().valueOf();
if(now-old>wait){
// 实现立即执行
fun.apply(context,argus);
old=now;
}
}
}
// 方法二:超时调用
function throttle(fun,wait){
let timeout;
return function(){
let context=this;
let argus=arguments;
if(!timeout){
timeout=setTimeout(()=>{
fun.apply(context,argus);
timeout=null;
},wait)
}
}
}
</script>