# Throttle

```
定義： 在一段時間內只會執行一次觸發事件的回調 (callback) 函式，若在這之中又有新事件觸發，則不執行此回調函式
適合用在那些頻繁觸發的事件中，確保不會造成過多的性能損耗，特別是在使用者交互、DOM 操作以及網路請求等場景

使用場景
1. infinite scroll
2. 捲動事件（scroll）
3. 視窗調整大小事件（resize）

```

#### 簡單版

```

lodash throttle 實作
無 leading trailing 版本

function throttle(func, wait) {

  let accept = true;
  let temp = null;

  const run = () => {
    
      setTimeout(() => {  // 時間結束會做最後一次傳進 func 的參數
        if(temp !== null) {
          func(temp)
          temp = null;
        }
        accept = true;
      }, wait)
  }
  return (...args) => {
    if(accept) {
      accept = false
      
      func(args);  // 會先做一次
      run()
    } else {
      temp = args; // 當在區間內重複呼叫 新的參數取代舊參數
    }
  }
}

```

#### 有參數版

```

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

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

  let temp = null;
  let first = true;

  const run = () => {
    setTimeout(() => {
      if(option.trailing && (temp !== null)) { // trailing 判斷結束的 func
        func(temp)
        temp = null;
        run()
      } else {
        first = true;
      }
    }, wait)
  }

  return (...args) => {
    temp = args;
    if(option.leading && first) { // leading 判斷最開始的 func
      func(temp)
      temp = null;
    }
    if(first) {
      first = false;
      run();
    }
  }
}

```


---

# 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/throttle.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.