js防抖 代码实现

要实现JS防抖的代码，可以参考以下步骤：
1. 创建一个防抖函数，命名为`debounce`，该函数接收两个参数：要执行的函数`func`和延迟时间`delay`。
2. 在`debounce`函数内部创建一个变量`timer`用来保存定时器的ID。
3. 返回一个函数，命名为`debounced`，该函数用于实际执行防抖操作。
4. 在`debounced`函数内部，使用`clearTimeout`来清除之前的定时器。
5. 创建一个新的定时器，将其ID保存到`timer`变量中。
6. 在新的定时器中，使用`setTimeout`来延迟执行传入的函数`func`，延迟时间为`delay`。
7. 最后，将`debounced`函数作为返回值返回。

下面是具体的代码实现：

function debounce(func, delay) {
  let timer;

  return function debounced() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func();
      timer = null;
    }, delay);
  };
}

这样，你就可以使用`debounce`函数来创建一个防抖函数了。可以将要执行的函数和延迟时间作为参数传入，然后将返回的函数绑定到相应的事件上。

例如，使用`debounce`函数创建一个防抖函数，并将其绑定到输入框的`input`事件上：

const debouncedFunction = debounce(() => {
  console.log('执行防抖操作');
}, 1000);

Input.oninput = debouncedFunction;

这样，在输入框输入内容时，只有在停止输入后的1秒内才会执行防抖函数中的代码。

如果需要在某些情况下取消防抖操作，可以调用返回的函数的`cancel`方法来清除定时器。例如，点击一个按钮来取消防抖操作：

btn.onclick = function() {
  debouncedFunction.cancel();
};

这样，点击按钮时就会取消之前设置的防抖操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [js防抖功能实现](https://blog.csdn.net/weixin_59554510/article/details/126670272)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]