# Debounce

```

定義：將多次操作優化為，只在最後一次執行

使用情境：輸入框推薦

```

#### 簡單版本

```
如果反覆的 call function 就重新計時
直到計時結束執行

function debounce(func, wait) {
  let id = 0;
  return (arg) => {
    clearTimeout(id);
    id = setTimeout(() => {
      func(arg)
    }, wait)
    
  }
}

```

#### 有參數的版本

```

leading 控制最初的 function 觸發
trailing 控制結束的 function 觸發
兩個參數都 false 則不會有任何動作

function debounce(func, wait, option = {leading: false, trailing: true}) {

  let id = 0;
  let waiting = false;
  return (arg) => {

    if(!waiting && option.leading) { // 第一次 call func
      func(arg)
      waiting = true;
    } else {
      clearTimeout(id);
      id = setTimeout(() => {
        if(option.trailing) { // 結束 call func
          func(arg)
        }
        waiting = false;
      }, wait)
    }
  }
}

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://de-yus-note.gitbook.io/de-yus-note/js-coding/debounce.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.