写一个js的防抖和节流
时间: 2023-05-21 18:02:57 浏览: 73
防抖和节流是优化前端性能的常用方法。防抖是指在一定时间内,只执行最后一次触发的事件,而节流是指在一定时间内,只执行一次触发的事件。下面是一个简单的实现:
// 防抖
function debounce(fn, delay) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
// 节流
function throttle(fn, delay) {
let timer = null;
return function() {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
};
}
使用方法:
const debouncedFn = debounce(() => {
console.log('debounced');
}, 1000);
const throttledFn = throttle(() => {
console.log('throttled');
}, 1000);
// 触发事件
debouncedFn();
throttledFn();
相关问题
用js写一个防抖与节流
防抖和节流是前端开发中常用的性能优化方案。
防抖是指在事件触发后,等待一定时间再执行回调函数。如果在等待时间内再次触发事件,则重新计时,直到等待时间结束再执行回调函数。可以用于优化input输入、window.resize等事件的处理。代码如下:
```
function debounce(fn, delay) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
```
节流是指在一定时间内只执行一次回调函数。可以用于优化scroll、mousemove等事件的处理。代码如下:
```
function throttle(fn, delay) {
let lastTime = 0;
return function() {
const now = Date.now();
if (now - lastTime > delay) {
fn.apply(this, arguments);
lastTime = now;
}
};
}
```
用js 写一个节流防抖
函数节流和函数防抖都是为了解决高频率触发事件时的性能问题。函数节流是指在一定时间内,只执行一次事件,而函数防抖是指在一定时间内,事件触发后,只有等待一段时间后未再次触发该事件,才执行事件处理函数。下面是用 JavaScript 实现函数节流和函数防抖的示例代码:
函数节流:
```javascript
function throttle(func, delay) {
let lastTime = 0;
return function (...args) {
const nowTime = new Date().getTime();
if (nowTime - lastTime > delay) {
func.apply(this, args);
lastTime = nowTime;
}
};
}
function handle() {
console.log('throttle');
}
window.addEventListener('scroll', throttle(handle, 1000));
```
函数防抖:
```javascript
function debounce(func, delay) {
let timer = null;
return function (...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
function handle() {
console.log('debounce');
}
window.addEventListener('scroll', debounce(handle, 1000));
```
在这个示例中,我们分别使用了函数节流和函数防抖来优化了 window 的 scroll 事件的处理函数,当用户滚动页面时,每隔 1 秒执行一次函数节流的处理函数,或者等待 1 秒后再执行函数防抖的处理函数。这样可以有效降低事件处理函数的执行频率,优化页面性能。