throttle (节流)

throttle 函数用于创建一个节流函数，以控制函数在特定时间段内的执行频率。常用于处理高频事件，如滚动、窗口调整大小等，以提高性能和用户体验。

函数调用方式

throttle(func, waitTime = 500, immediate = true)

参数说明

参数名	类型	描述
func	Function	需要节流的函数。
waitTime	Number (可选)	调用 func 之间的最小时间间隔（单位：毫秒），默认为 500。
immediate	Boolean (可选)	指定是否在节流开始时立即执行函数，默认为 true。

返回值

返回一个新的节流函数，该函数在指定时间间隔内仅允许执行一次原函数 func。

异常处理

• 无特殊异常处理，但应确保 func 是一个有效的函数。

示例代码

基本用法

const log = () => console.log('Function executed!');
const throttledLog = throttle(log, 1000);

// 在短时间内多次调用
throttledLog(); // 输出: 'Function executed!'
throttledLog(); // 不会输出，因为在 1000 毫秒内无法再次执行

使用非立即执行

const delayedLog = () => console.log('Delayed function executed!');
const throttledDelayedLog = throttle(delayedLog, 1000, false);

throttledDelayedLog(); // 不会立即执行
setTimeout(throttledDelayedLog, 500); // 不会输出
setTimeout(throttledDelayedLog, 1000); // 输出: 'Delayed function executed!'

在事件处理程序中使用

window.addEventListener('scroll', throttle(() => {
    console.log('Scrolling...');
}, 300));

结论

throttle 函数提供了一种有效的方式来控制函数的执行频率，从而提升性能和用户体验，尤其是在处理高频率事件时，如滚动、放大缩小等场景。