在实际开发中,会遇到一些操作,如浏览器的onresize、mousemove等会频繁触发的事情。为了防止被频繁触发,造成频繁请求服务器的压力。需要限制一下触发的事件。这时候,我们考虑使用防抖和节流来控制触发事件的频次。
1. 函数防抖(debounce)
防抖函数:一个频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。
代码如下:
//html
<button id="btn">点击按钮</button>
//js
function debounce(fn, delay) {
// 记录上一次的延时器
var timer = null;
return function() {
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(this)
}, delay)
}
}
}
let fn = function() {
console.log('点击事件被触发' + Date.now())
}
document.getElementById('btn').onclick = debounce(fn, 1000)
2. 函数节流
函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。
//css
html,body{height:500%;}
//js
function throttle(fn, delay) {
var lastTime = 0;
return function() {
// 记录当前函数触发的时间
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
// 修正this指向问题
fn.call(this);
// 同步时间
lastTime = nowTime;
}
}
}
let fn = function() { console.log('scroll事件被触发了' + Date.now()) };
document.onscroll = throttle(fn,1000)
函数节流的另一种实现方式
<html>
<button id = 'button'>点击</button>
</html>
<script>
function thro(func,wait){
let timerOut;
return function(){
if(!timerOut){
timerOut = serTimeout(function(){
func()
timerOut = null
},wait)
}
}
}
function handle(){
console.log(Math.random())
}
document.getElementById('button').onClick = thro(handle,1000)
</script>