节流(throttle)指的是在一段时间内,只执行一次函数。比如说,有一个按钮,点击一次后需要等待一秒才能再次点击,不然就不会执行。这个就是节流。
实现一个简单的节流函数,可以这样写:
javascript
function throttle(fn, delay) {
let timer = null;
return function() {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
}
}
这个函数接受两个参数,第一个是要执行的函数,第二个是时间间隔。函数内部使用了一个计时器,如果计时器不存在,就执行函数并设置计时器;如果计时器已存在,就不执行函数。
防抖(debounce)指的是在一段时间内,只执行最后一次函数。比如说,一个输入框需要在用户输入完毕后才能搜索,那么在用户连续输入的时候,就需要防止过多的搜索请求,只在用户停止输入一段时间后才发送搜索请求。
实现一个简单的防抖函数,可以这样写:
javascript
function debounce(fn, delay) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
这个函数接受两个参数,第一个是要执行的函数,第二个是时间间隔。函数内部使用了一个计时器,每次执行前先清除之前的计时器,然后设置一个新的计时器。如果在时间间隔内又触发了该函数,就清除之前的计时器,并设置一个新的计时器。