防抖和节流的差别:
防抖:debounce函数让用户不触发事件后再执行函数
节流:throttle函数让用户只能以一定的速率(时间间隔)出触发函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击</button>
<script>
//函数防抖
//频繁触发函数,函数只在最后一次才调用,使用了定时器setTimeout和闭包
function debounce(fn,delay){
var timeId = null;
return function(){
clearTimeout(timeId)//关键:每次触发清除上次的定时器
var context = this,args = arguments;
timeId = setTimeout(function(){
fn.apply(context,args)
},delay)
}
}
//函数节流(时间戳方案)
//频繁触发函数,函数会以一定的时间间隔调用,使用定时器和闭包
function throttle(fn,threshold){
var timeId,
start = new Date()
threshold = threshold||160
return function(){
var context = this,args = arguments,curr = Date.now()
clearTimeout(timeId)//关键:每次执行前清除定时器
if(curr-start>=threshold){//关键:调用时判断当前时间和上次触发时间的间隔达到要求,触发函数
fn.apply(this,args)
start = curr;//关键:将此次调用的时间戳设为上次
}else{//最后一次触发未达到时间间隔,也再触发一次
timeId = setTimeout(function(){
fn.apply(context,args)
},threshold)
}
}
}
function handleClick(e){
console.log(e.target.innerHTML)
}
var btnObj = document.querySelector("#btn")
// btnObj.onclick = debounce(handleClick,500)
btnObj.onclick = throttle(handleClick,500)
// 函数节流(定时器方案)
// 使用setTimeout来保证一段时间后执行函数,timer存在时不执行setTimeout,实现节流
function throttleTimer(fn, wait = 1000) {
let timer;
return function () {
if (timer) return;
timer = setTimeout(() => {
fn.apply(this, arguments);
clearTimeout(timer);
timer = null;
}, wait);
};
}
</script>
</body>
</html>