JS-26 认识防抖和节流函数；自定义防抖、节流函数；自定义深拷贝、事件总线函数

**JS-26: 防抖和节流函数**

在 JavaScript 中，函数的执行频率往往会影响到程序的性能和用户体验。例如，在表单提交、鼠标移动等事件中，我们可能需要限制函数的执行频率，以避免过度触发或资源浪费。在这种情况下，防抖和节流函数就显得尤为重要。

###1. 防抖函数**什么是防抖函数？**

防抖函数（debounce）是一种在事件发生后延迟执行函数的机制。它会在事件触发后等待一段时间，然后再执行函数。如果在这段时间内事件再次触发，函数就会被重新延迟。

**自定义防抖函数**

javascriptfunction debounce(func, wait) {
 let timeout = null;
 return function(...args) {
 clearTimeout(timeout);
 timeout = setTimeout(() => {
 func.apply(this, args);
 }, wait);
 };
}

在这个例子中，我们定义了一个 `debounce` 函数，它接受两个参数：函数 `func` 和延迟时间 `wait`。当我们调用 `debounce(func, wait)` 时，它会返回一个新的函数。

新函数的作用是，当事件触发时，清除之前的延迟（如果有），然后再次设置延迟。如果在这段时间内事件再次触发，这个过程就会重复。最后，当延迟结束时，原来的函数 `func` 会被执行。

###2. 节流函数**什么是节流函数？**

节流函数（throttle）与防抖函数类似，但它会在事件发生后立即执行函数，然后再等待一段时间。这个过程会持续到事件停止触发为止。

**自定义节流函数**

javascriptfunction throttle(func, wait) {
 let timeout = null;
 return function(...args) {
 if (timeout === null) {
 func.apply(this, args);
 timeout = setTimeout(() => {
 timeout = null;
 }, wait);
 }
 };
}

在这个例子中，我们定义了一个 `throttle` 函数，它接受两个参数：函数 `func` 和延迟时间 `wait`。当我们调用 `throttle(func, wait)` 时，它会返回一个新的函数。

新函数的作用是，当事件触发时，立即执行原来的函数 `func`，然后再次设置延迟。如果在这段时间内事件再次触发，这个过程就会重复。最后，当延迟结束时，延迟标志 `timeout` 会被清除。

###3. 深拷贝函数**什么是深拷贝函数？**

深拷贝函数（deepCopy）是一种将一个对象或数组的所有属性和值全部复制到另一个新对象或数组中。这个过程会递归地处理每个属性和值，直到所有内容都被完全复制。

**自定义深拷贝函数**

javascriptfunction deepCopy(obj) {
 if (typeof obj !== 'object' || Array.isArray(obj)) return obj;
 const copy = {};
 for (const key in obj) {
 if (Object.hasOwnProperty.call(obj, key)) {
 copy[key] = deepCopy(obj[key]);
 }
 }
 return copy;
}

在这个例子中，我们定义了一个 `deepCopy` 函数，它接受一个对象或数组作为参数。函数首先检查输入是否为对象或数组，如果不是，则直接返回原始值。

如果是对象或数组，函数会创建一个新对象或数组，并递归地处理每个属性和值。如果属性或值是基本类型（如数字、字符串等），则直接复制；如果是对象或数组，则再次调用 `deepCopy` 函数进行深拷贝。

###4.事件总线函数**什么是事件总线函数？**

事件总线函数（eventBus）是一种用于在应用中传递事件的机制。它会将事件从一个组件传递到另一个组件，甚至可以跨越多个模块或服务。

**自定义事件总线函数**

javascriptclass EventBus {
 constructor() {
 this.listeners = {};
 }
 on(event, listener) {
 if (!this.listeners[event]) {
 this.listeners[event] = [];
 }
 this.listeners[event].push(listener);
 }
 off(event, listener) {
 if (this.listeners[event]) {
 const index = this.listeners[event].indexOf(listener);
 if (index !== -1) {
 this.listeners[event].splice(index,1);
 }
 }
 }
 emit(event, ...args) {
 if (this.listeners[event]) {
 for (const listener of this.listeners[event]) {
 listener(...args);
 }
 }
 }
}

在这个例子中，我们定义了一个 `EventBus` 类，它用于管理事件的传递。类有三个方法：`on`、`off` 和 `emit`。

`on` 方法用于注册事件监听器。当事件触发时，会将事件和相关数据传递给所有注册的监听器。

`off` 方法用于注销事件监听器，可以根据需要移除特定的监听器或全部监听器。

`emit` 方法用于触发事件，将事件和相关数据传递给所有注册的监听器。

以上就是关于防抖、节流函数以及自定义深拷贝和事件总线函数的介绍。这些函数在实际开发中会非常有用，希望对你有所帮助！