节流和防抖是JavaScript中常用的性能优化手段。它们主要用于优化频繁触发的事件，比如resize、scroll、mousemove等。
节流和防抖的目的都是为了减少函数的执行次数，提升性能。
节流是指在一定时间间隔内只执行一次函数。例如，当用户连续滚动页面时，我们可以使用节流来减少触发事件的次数，从而提高性能。
节流的实现方式有两种：
使用时间戳实现节流，即在一定时间内执行第一次触发事件的操作，之后在时间间隔内忽略所有操作，直到下个时间间隔开始时再执行第一次触发事件的操作。
function throttle(func, wait) {
let lastTime = 0;
return function() {
let nowTime = new Date().getTime();
if (nowTime - lastTime > wait) {
func.apply(this, arguments);
lastTime = nowTime;
}
}
}
// 示例
window.addEventListener('scroll', throttle(function() {
console.log('scroll');
}, 1000));
使用定时器实现节流，即在一定时间内执行最后一次触发事件的操作，之前的所有操作都被忽略。
function throttle(func, wait) {
let timeout;
return function() {
if (!timeout) {
timeout = setTimeout(() => {
func.apply(this, arguments);
timeout = null;
}, wait);
}
}
}
// 示例
window.addEventListener('scroll', throttle(function() {
console.log('scroll');
}, 1000));
防抖是指在一定时间内只执行最后一次触发事件的操作。例如，当用户连续输入时，我们可以使用防抖来减少触发事件的次数，从而提高性能。
防抖的实现方式有一个：
使用定时器实现防抖，即在一定时间间隔内，每次触发事件都重新计时，直到时间间隔到达后执行最后一次触发事件的操作。
function debounce(func, wait) {
let timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, arguments);
}, wait);
}
}
// 示例
window.addEventListener('resize', debounce(function() {
console.log('resize');
}, 1000));
使用节流和防抖可以有效地减少函数的执行次数，提升页面的性能。