2. 程式人生 > >理解並優化函式節流Throttle

理解並優化函式節流Throttle

阿新 • • 發佈：2018-11-07

一、函式為什麼要節流

有如下程式碼

let n = 1
window.onmousemove = () => {
  console.log(`第${n}次觸發回撥`)
  n++
}
複製程式碼

當我們在PC端頁面上滑動滑鼠時，一秒可以可以觸發約60次事件。大家也可以訪問下面的線上例子進行測試。

檢視線上例子： 函式節流-監聽滑鼠移動觸發次數測試 by Logan (@logan70) on CodePen.

這裡的回撥函式只是列印字串，如果回撥函式更加複雜，可想而知瀏覽器的壓力會非常大，可能降低使用者體驗。

resize、scroll或mousemove等事件的監聽回撥會被頻繁觸發，因此我們要對其進行限制。

二、實現思路

函式節流簡單來說就是對於連續的函式呼叫，每間隔一段時間，只讓其執行一次。初步的實現思路有兩種：

1. 使用時間戳

設定一個對比時間戳，觸發事件時，使用當前時間戳減去對比時間戳，如果差值大於設定的間隔時間，則執行函式，並用當前時間戳替換對比時間戳；如果差值小於設定的間隔時間，則不執行函式。

function throttle(method, wait) {
  // 對比時間戳，初始化為0則首次觸發立即執行，初始化為當前時間戳則wait毫秒後觸發才會執行
  let previous = 0
  return function(...args) {
    let context = this
 

    let now = new Date().getTime()
    // 間隔大於wait則執行method並更新對比時間戳
    if (now - previous > wait) {
      method.apply(context, args)
      previous = now
    }
  }
}
複製程式碼

檢視線上例子： 函式節流-初步實現之時間戳 by Logan (@logan70) on CodePen.

2. 使用定時器

當首次觸發事件時，設定定時器，wait毫秒後執行函式並將定時器置為null，之後觸發事件時，如果定時器存在則不執行，如果定時器不存在則再次設定定時器。

function throttle(method, wait) {
  let timeout
  return function(...args) {
    let context = this
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null
        method.apply(context, args)
      }, wait)
    }
  }
}
複製程式碼

檢視線上例子： 函式節流-初步實現之定時器 by Logan (@logan70) on CodePen.

3. 兩種方法對比

  • 首次觸發：使用時間戳實現時會立即執行（將previous設為0的情況）；使用定時器實現會設定定時器，wait毫秒後執行。
  • 停止觸發：使用時間戳實現時，停止觸發後不會再執行；使用定時器實現時，由於存在定時器，停止觸發後還會執行一次。

三、函式節流 Throttle 應用場景

  • DOM 元素的拖拽功能實現（mousemove）
  • 射擊遊戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）
  • 計算滑鼠移動的距離（mousemove）
  • Canvas 模擬畫板功能（mousemove）
  • 搜尋聯想（keyup）
  • 監聽滾動事件判斷是否到頁面底部自動載入更多：給 scroll 加了 debounce 後，只有使用者停止滾動後，才會判斷是否到了頁面底部；如果是 throttle 的話，只要頁面滾動就會間隔一段時間判斷一次

四、函式節流最終版

程式碼說話，有錯懇請指出

function throttle(method, wait, {leading = true, trailing = true} = {}) {
  // result 記錄method的執行返回值
  let timeout, result
  // 記錄上次原函式執行的時間（非每次更新）
  let methodPrevious = 0
  // 記錄上次回撥觸發時間（每次都更新）
  let throttledPrevious = 0
  let throttled =  function(...args) {
    let context = this
    // 使用Promise，可以在觸發回撥時拿到原函式執行的返回值
    return new Promise(resolve => {
      let now = new Date().getTime()
      // 兩次相鄰觸發的間隔
      let interval = now - throttledPrevious
      // 更新本次觸發時間供下次使用
      throttledPrevious = now
      // 重置methodPrevious為now，remaining = wait > 0，假裝剛執行過，實現禁止立即執行
      // 統一條件：leading為false
      // 加上以下條件之一
      // 1. 首次觸發（此時methodPrevious為0）
      // 2. trailing為true時，停止觸發時間超過wait，定時器內函式執行（methodPrevious被置為0），然後再次觸發
      // 3. trailing為false時（不設定時器，methodPrevious不會被置為0），停止觸發時間超過wait後再次觸發（interval > wait）
      if (leading === false && (!methodPrevious || interval > wait)) {
        methodPrevious = now
        // 保險起見，清除定時器並置為null
        // 假裝剛執行過要假裝的徹底XD
        if (timeout) {
          clearTimeout(timeout)
          timeout = null
        }
      }
      // 距離下次執行原函式的間隔
      let remaining = wait - (now - methodPrevious)
      // 1. leading為true時，首次觸發就立即執行
      // 2. 到達下次執行原函式時間
      // 3. 修改了系統時間
      if (remaining <= 0 || remaining > wait) {
        if (timeout) {
          clearTimeout(timeout)
          timeout = null
        }
        // 更新對比時間戳，執行函式並記錄返回值，傳給resolve
        methodPrevious = now
        result = method.apply(context, args)
        resolve(result)
        // 解除引用，防止記憶體洩漏
        if (!timeout) context = args = null
      } else if (!timeout && trailing !== false) {
        timeout = setTimeout(() => {
          // leading為false時將methodPrevious設為0的目的在於
          // 若不將methodPrevious設為0，如果定時器觸發後很長時間沒有觸發回撥
          // 下次觸發時的remaining為負，原函式會立即執行，違反了leading為false的設定
          methodPrevious = leading === false ? 0 : new Date().getTime()
          timeout = null
          result = method.apply(context, args)
          resolve(result)
          // 解除引用，防止記憶體洩漏
          if (!timeout) context = args = null
        }, remaining)
      }
    })
  }
  // 加入取消功能，使用方法如下
  // let throttledFn = throttle(otherFn)
  // throttledFn.cancel()
  throttled.cancel = function() {
    clearTimeout(timeout)
    previous = 0
    timeout = null
  }

  return throttled
}
複製程式碼

呼叫節流後的函式的外層函式也需要使用Async/Await語法等待執行結果返回

使用方法見程式碼：

function square(num) {
  return Math.pow(num, 2)
}

// let throttledFn = throttle(square, 1000)
// let throttledFn = throttle(square, 1000, {leading: false})
// let throttledFn = throttle(square, 1000, {trailing: false})
let throttledFn = throttle(square, 1000, {leading: false, trailing: false})

window.onmousemove = async () => {
  try {
    let val = await throttledFn(4)
    // 原函式不執行時val為undefined
    if (typeof val !== 'undefined') {
      console.log(`原函式返回值為${val}`)
    }
  } catch (err) {
    console.error(err)
  }
}

// 滑鼠移動時，每間隔1S輸出：
// 原函式的返回值為：16
複製程式碼

檢視線上例子： 函式節流-最終版 by Logan (@logan70) on CodePen.

具體的實現步驟請往下看

五、函式節流 Throttle 的具體實現步驟

1. 優化第一版：融合兩種實現方式

這樣實現的效果是首次觸發立即執行，停止觸發後會再執行一次

function throttle(method, wait) {
  let timeout
  let previous = 0
  return function(...args) {
    let context = this
    let now = new Date().getTime()
    // 距離下次函式執行的剩餘時間
    let remaining = wait - (now - previous)
    // 如果無剩餘時間或系統時間被修改
    if (remaining <= 0 || remaining > wait) {
      // 如果定時器還存在則清除並置為null
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      }
      // 更新對比時間戳並執行函式
      previous = now
      method.apply(context, args)
    } else if (!timeout) {
      // 如果有剩餘時間但定時器不存在，則設定定時器
      // remaining毫秒後執行函式、更新對比時間戳
      // 並將定時器置為null
      timeout = setTimeout(() => {
        previous = new Date().getTime()
        timeout = null
        method.apply(context, args)
      }, remaining)
    }
  }
}
複製程式碼

我們來捋一捋，假設連續觸發回撥：

  1. 第一次觸發：對比時間戳為0，剩餘時間為負數，立即執行函式並更新對比時間戳
  2. 第二次觸發：剩餘時間為正數，定時器不存在，設定定時器
  3. 之後的觸發：剩餘時間為正數，定時器存在，不執行其他行為
  4. 直至剩餘時間小於等於0或定時器內函式執行（由於回撥觸發有間隔，且setTimeout有誤差，故哪個先觸發並不確定）
  • 若定時器內函式執行，更新對比時間戳，並將定時器置為null，下一次觸發繼續設定定時器
  • 若定時器內函式未執行，但剩餘時間小於等於0，清除定時器並置為null，立即執行函式，更新時間戳，下一次觸發繼續設定定時器
  1. 停止觸發後：若非在上面所述的兩個特殊時間點時停止觸發，則會存在一個定時器，原函式還會被執行一次

檢視線上例子： 函式節流-優化第一版：融合兩種實現方式 by Logan (@logan70) on CodePen.

2. 優化第二版：提供首次觸發時是否立即執行的配置項

// leading為控制首次觸發時是否立即執行函式的配置項
function throttle(method, wait, leading = true) {
  let timeout
  let previous = 0
  return function(...args) {
    let context = this
    let now = new Date().getTime()
    // !previous代表首次觸發或定時器觸發後的首次觸發，若不需要立即執行則將previous更新為now
    // 這樣remaining = wait > 0，則不會立即執行，而是設定定時器
    if (!previous && leading === false) previous = now
    let remaining = wait - (now - previous)
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      }
      previous = now
      method.apply(context, args)
    } else if (!timeout) {
      timeout = setTimeout(() => {
        // 如果leading為false，則將previous設為0，
        // 下次觸發時會與下次觸發時的now同步，達到首次觸發（對於使用者來說）不立即執行
        // 如果直接設為當前時間戳，若停止觸發一段時間，下次觸發時的remaining為負值，會立即執行
        previous = leading === false ? 0 : new Date().getTime()
        timeout = null
        method.apply(context, args)
      }, remaining)
    }
  }
}
複製程式碼

檢視線上例子： 函式節流-優化第二版：提供首次觸發時是否立即執行的配置項 by Logan (@logan70) on CodePen.

3. 優化第三版：提供停止觸發後是否還執行一次的配置項

// trailing為控制停止觸發後是否還執行一次的配置項
function throttle(method, wait, {leading = true, trailing = true} = {}) {
  let timeout
  let previous = 0
  return function(...args) {
    let context = this
    let now = new Date().getTime()
    if (!previous && leading === false) previous = now
    let remaining = wait - (now - previous)
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      }
      previous = now
      method.apply(context, args)
    } else if (!timeout && trailing !== false) {
      // 如果有剩餘時間但定時器不存在，且trailing不為false，則設定定時器
      // trailing為false時等同於只使用時間戳來實現節流
      timeout = setTimeout(() => {
        previous = leading === false ? 0 : new Date().getTime()
        timeout = null
        method.apply(context, args)
      }, remaining)
    }
  }
}
複製程式碼

檢視線上例子： 函式節流-優化第三版：提供停止觸發後是否還執行一次的配置項 by Logan (@logan70) on CodePen.

4. 優化第四版：提供取消功能

有些時候我們需要在不可觸發的這段時間內能夠手動取消節流，程式碼實現如下：

function throttle(method, wait, {leading = true, trailing = true} = {}) {
  let timeout
  let previous = 0
  // 將返回的匿名函式賦值給throttled，以便在其上新增取消方法
  let throttled =  function(...args) {
    let context = this
    let now = new Date().getTime()
    if (!previous && leading === false) previous = now
    let remaining = wait - (now - previous)
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      }
      previous = now
      method.apply(context, args)
    } else if (!timeout && trailing !== false) {
      timeout = setTimeout(() => {
        previous = leading === false ? 0 : new Date().getTime()
        timeout = null
        method.apply(context, args)
      }, remaining)
    }
  }

  // 加入取消功能，使用方法如下
  // let throttledFn = throttle(otherFn)
  // throttledFn.cancel()
  throttled.cancel = function() {
    clearTimeout(timeout)
    previous = 0
    timeout = null
  }

  // 將節流後函式返回
  return throttled
}
複製程式碼

檢視線上例子： 函式節流-優化第四版：提供取消功能 by Logan (@logan70) on CodePen.

5. 優化第五版：處理原函式返回值

需要節流的函式可能是存在返回值的，我們要對這種情況進行處理，underscore的處理方法是將函式返回值在返回的debounced函式內再次返回，但是這樣其實是有問題的。如果原函式執行在setTimeout內，則無法同步拿到返回值，我們使用Promise處理原函式返回值。

function throttle(method, wait, {leading = true, trailing = true} = {}) {
  // result記錄原函式執行結果
  let timeout, result
  let previous = 0
  let throttled =  function(...args) {
    let context = this
    // 返回一個Promise，以便可以使用then或者Async/Await語法拿到原函式返回值
    return new Promise(resolve => {
      let now = new Date().getTime()
      if (!previous && leading === false) previous = now
      let remaining = wait - (now - previous)
      if (remaining <= 0 || remaining > wait) {
        if (timeout) {
          clearTimeout(timeout)
          timeout = null
        }
        previous = now
        result = method.apply(context, args)
        // 將函式執行返回值傳給resolve
        resolve(result)
      } else if (!timeout && trailing !== false) {
        timeout = setTimeout(() => {
          previous = leading === false ? 0 : new Date().getTime()
          timeout = null
          result = method.apply(context, args)
          // 將函式執行返回值傳給resolve
          resolve(result)
        }, remaining)
      }
    })
  }

  throttled.cancel = function() {
    clearTimeout(timeout)
    previous = 0
    timeout = null
  }

  return throttled
}
複製程式碼

使用方法一：在呼叫節流後的函式時，使用then拿到原函式的返回值

function square(num) {
  return Math.pow(num, 2)
}

let throttledFn = throttle(square, 1000, false)

window.onmousemove = () => {
  throttledFn(4).then(val => {
    console.log(`原函式的返回值為：${val}`)
  })
}

// 滑鼠移動時，每間隔1S後輸出：
// 原函式的返回值為：16
複製程式碼

使用方法二：呼叫節流後的函式的外層函式使用Async/Await語法等待執行結果返回

使用方法見程式碼：

function square(num) {
  return Math.pow(num, 2)
}

let throttledFn = throttle(square, 1000)

window.onmousemove = async () => {
  try {
    let val = await throttledFn(4)
    // 原函式不執行時val為undefined
    if (typeof val !== 'undefined') {
      console.log(`原函式返回值為${val}`)
    }
  } catch (err) {
    console.error(err)
  }
}

// 滑鼠移動時，每間隔1S輸出：
// 原函式的返回值為：16
複製程式碼

檢視線上例子： 函式節流-優化第五版：處理原函式返回值 by Logan (@logan70) on CodePen.

6. 優化第六版：可同時禁用立即執行和後置執行

模仿underscore實現的函式節流有一點美中不足，那就是 leading：false 和 trailing: false 不能同時設定。

如果同時設定的話，比如當你將滑鼠移出的時候，因為 trailing 設定為 false，停止觸發的時候不會設定定時器，所以只要再過了設定的時間，再移入的話，remaining為負數，就會立刻執行，就違反了 leading: false，這裡我們優化的思路如下：

計算連續兩次觸發回撥的時間間隔，如果大於設定的間隔值時，重置對比時間戳為當前時間戳，這樣就相當於回到了首次觸發，達到禁止首次觸發（偽）立即執行的效果，程式碼如下，有錯懇請指出：

function throttle(method, wait, {leading = true, trailing = true} = {}) {
  let timeout, result
  let methodPrevious = 0
  // 記錄上次回撥觸發時間（每次都更新）
  let throttledPrevious = 0
  let throttled =  function(...args) {
    let context = this
    return new Promise(resolve => {
      let now = new Date().getTime()
      // 兩次觸發的間隔
      let interval = now - throttledPrevious
      // 更新本次觸發時間供下次使用
      throttledPrevious = now
      // 更改條件，兩次間隔時間大於wait且leading為false時也重置methodPrevious，實現禁止立即執行
      if (leading === false && (!methodPrevious || interval > wait)) {
        methodPrevious = now
      }
      let remaining = wait - (now - methodPrevious)
      if (remaining <= 0 || remaining > wait) {
        if (timeout) {
          clearTimeout(timeout)
          timeout = null
        }
        methodPrevious = now
        result = method.apply(context, args)
        resolve(result)
        // 解除引用，防止記憶體洩漏
        if (!timeout) context = args = null
      } else if (!timeout && trailing !== false) {
        timeout = setTimeout(() => {
          methodPrevious = leading === false ? 0 : new Date().getTime()
          timeout = null
          result = method.apply(context, args)
          resolve(result)
          // 解除引用，防止記憶體洩漏
          if (!timeout) context = args = null
        }, remaining)
      }
    })
  }

  throttled.cancel = function() {
    clearTimeout(timeout)
    methodPrevious = 0
    timeout = null
  }

  return throttled
}
複製程式碼

檢視線上例子： 函式節流-優化第六版：可同時禁用立即執行和後置執行 by Logan (@logan70) on CodePen.

六、參考文章

JavaScript專題之跟著 underscore 學節流

underscore 函式節流的實現

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。

相關推薦

理解並優化函式節流Throttle

一、函式為什麼要節流 有如下程式碼 let n = 1 window.onmousemove = () => { console.log(`第${n}次觸發回撥`) n++ } 複製程式碼 當我們在PC端頁面上滑動滑鼠時，一秒可以可以觸發約60次事件。大家也可以訪問下面的線上例子進行測試。

JS效能優化 -- 函式節流

一、函式節流的概念、主要用途及意義 概念：函式節流是通過一個定時器，阻斷連續重複的函式呼叫，從而一定程度上優化效能。 用途：主要用於使用者介面呼叫的函式，如：resize、mousemove、keyup事件的監聽函式。 這類監聽函式的主要

“淺入淺出”函式防抖（debounce）與節流(throttle)

函式防抖與節流是日常開發中經常用到的技巧，也是前端面試中的常客，但是發現自己工作一年多了，要麼直接複用已有的程式碼或工具，要麼抄襲《JS高階程式設計》書中所述“函式節流”,（實際上紅寶書上的實現類似是函式防抖而不是函式節流）,還沒有認真的總結和親自實現這兩個方法，實在是一件蠻丟臉的事。網上關於這方面的資料簡直

關於js函式節流理解

函式節流的目的 從字面上就可以理解，函式節流就是用來節流函式從而一定程度上優化效能的。例如，DOM 操作比起非DOM 互動需要更多的記憶體和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時候甚至會崩潰。尤其在IE 中使用onresize 事件處理程式的時候容易發生，當調整

深入理解並徹底掌握使用unique函式去重

巨集觀來看，使用unique函式去重主要分為以下幾步： 以vector為例： 宣告部分： #include<vector> #include<algorithm> vector<int>v; vector<int>::it

js前端效能優化之函式節流和函式防抖

前言：針對一些會頻繁觸發的事件如scroll、resize，如果正常繫結事件處理函式的話，有可能在很短的時間內多次連續觸發事件，十分影響效能 節流： 節流：使得一定時間內只觸發一次函式。 它和防抖動最大的區別就是，節流函式不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式

深入理解javascript函式進階系列第三篇——函式節流和函式防抖

前面的話 　　javascript中的函式大多數情況下都是由使用者主動呼叫觸發的，除非是函式本身的實現不合理，否則一般不會遇到跟效能相關的問題。但在一些少數情況下，函式的觸發不是由使用者直接控制的。在這些場景下，函式有可能被非常頻繁地呼叫，而造成大的效能問題。解決效能問題的處理辦法就是函式節流和函式防抖。本

Javascript函式節流 —— How To Use Throttle

為限制輸入框change事件瘋狂傳送查詢請求，此時我們就需要用一個節流函式來優化一下效能了。 大致思路：設定一個定時器，在指定時間間隔內執行程式碼時重置定時器，直到函式請求停止，函式才會在限定時間之後才會正式執行。 實際專案中，將節流函式掛載到vue原型上，方便呼叫，例 main.js

函式去抖（debounce）和函式節流（throttle）

目的 以下場景往往由於事件頻繁被觸發，因而頻繁執行DOM操作、資源載入等重行為，導致UI停頓甚至瀏覽器崩潰。 window物件的resize、scroll事件 拖拽時的mousemove事件 射擊遊戲中的mousedown、keydown事件 文字輸入、自

Javascript性能優化之節流函數

滾動事件 add 沒有 使用 們的 java rip 也會 出了 在我們的工作中往往有這樣的需求，下拉上拉加載實現無限加載列表數據這樣的一個功能，這個時候小夥伴們可能就覺得這個功能幾分鐘的事，於是乎，下邊這段代碼浩浩蕩蕩就出來了 window.addEventListen

聊聊高並發（十九）理解並發編程的幾種&quot;性&quot; -- 可見性，有序性，原子性

sock clas 關註 條件 infoq zed 應該 單獨 ssa 這篇的主題本應該放在最初的幾篇。討論的是並發編程最基礎的幾個核心概念。可是這幾個概念又牽扯到非常多的實際技術。比方Java內存模型。各種鎖的實現，volatile的實現。原子變量等等，每個都可以展開

理解並使用.NET 4.5中的HttpClient（轉）

nts 定制 creat exit sta ogg 服務器 nal view 原文地址：http://www.cnblogs.com/wywnet/p/httpclient.html HttpClient介紹HttpClient是.NET4.5引入的一個HTTP客戶端庫，

八、JVM視角淺理解並發和鎖

之前 鎖定 線程 並發 標示 靜態變量 原子操作 store 執行順序 　　根據《深入理解java虛擬機》這本書總結 　　提到java的並發和鎖，第一反應可能回想到多線程、synchronized關鍵字等，那麽對於jvm虛擬機，這些是如何實現的呢？或者用的什麽思想實現的？

節流throttle和防抖debounce

限制 return str key cut blog 新頁面 apply bounce underscore.js提供了很多很有用的函數，今天想說說其中的兩個。這兩個函數都用於限制函數的執行。 debounce 在解釋這個函數前，我們先從一個例子看下這個函數的使用場景。假設

輪播圖理解並應用

var post bsp tle nbsp set get load utf 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"

第三方 CSS 並不安全 理解並使用JavaScript回調函數

數據 put nta hover 文本 head blog ras abs 最近一段時間，關於 通過 CSS 創建 “keylogger”（鍵盤記錄器） 的討論很多。 有些人呼籲瀏覽器廠商去“修復”它。有些人則深入研究，表示它僅能影響通過類 React 框架建立的網站，並指

深入理解並發/並行，阻塞/非阻塞，同步/異步【轉】

非阻塞 n) 做的 耗時 非阻塞socket 衣服 時間片輪轉 輪轉 理解 1、阻塞，非阻塞 首先，阻塞這個詞來自操作系統的線程/進程的狀態模型中，如下圖： 一個線程/進程經歷的5個狀態，創建，就緒，運行，阻塞，終止。各個狀態的轉換條件如上圖，其中有個阻塞狀態，就是

LOJ #2537. 「PKUWC 2018」Minimax (線段樹合並 優化dp)

get code define main 有一個 update ems minimax 計數 LOJ #2537. 「PKUWC 2018」Minimax (線段樹合並 優化dp) 題意 : 小 \(C\) 有一棵 \(n\) 個結點的有根樹，根是 \(1\) 號結點，

防抖debounce和節流throttle

就會 listener timestamp search ron 存在 iat NPU 崩潰 大綱 一、出現緣由 二、什麽是防抖debounce和節流throttle 三、應用場景 3.1防抖 3.2節流 一、出現緣由 前端開發中，有一部分用戶行為會頻繁觸發事件，而對於DO

深入理解並發/並行，阻塞/非阻塞，同步/異步

text 只有一個 ima UNC 不同 比較 callback 調度 狀態 首先，阻塞這個詞來自操作系統的線程/進程的狀態模型中，如下圖 : 一個線程/進程經歷的5個狀態，創建，就緒，運行，阻塞，終止。各個狀態的轉換條件如上圖，其中有個阻塞狀態，就是說當線程中調用某個函