写一个js 接口防抖 例子
时间: 2023-03-28 09:02:19 浏览: 55
好的,以下是一个简单的 JavaScript 接口防抖的例子:
```javascript
function debounce(func, delay) {
let timerId;
return function() {
const context = this;
const args = arguments;
clearTimeout(timerId);
timerId = setTimeout(() => {
func.apply(context, args);
}, delay);
}
}
// 使用例子
const button = document.querySelector('button');
button.addEventListener('click', debounce(() => {
console.log('Button clicked!');
}, 100));
```
这个例子中,`debounce` 函数接受两个参数:要执行的函数 `func` 和延迟时间 `delay`。它返回一个新的函数,这个新函数会在 `delay` 毫秒内被调用多次时,只执行一次 `func` 函数。这样可以避免在短时间内多次触发事件时,频繁地执行函数,从而提高性能。
相关问题
写一个js动画防抖函数
好的,我可以回答这个问题。以下是一个简单的JS动画防抖函数:
```
function debounce(func, wait, immediate) {
let timeout;
return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
```
这个函数可以用来防止动画在用户滚动页面时频繁触发,从而提高页面性能。
写一个js的防抖和节流
防抖和节流是优化前端性能的常用方法。防抖是指在一定时间内,只执行最后一次触发的事件,而节流是指在一定时间内,只执行一次触发的事件。下面是一个简单的实现:
// 防抖
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();