恁測試人員系列之：函式抖動與節流

JuoJuo發表於2018-08-04
函式

經常會在issue裡看到測試提的這樣的一個bug，使勁兒反覆點一個按鈕，咔咔咔點點點，發了好多個請求去後臺。

1.恁低端測試之：抖動

對於這種人我只想說：用函式防抖來收拾他！

大致的意思就是：延遲一個時間再執行要執行的函式，若在這個延遲時間內再次被觸發，那麼就把上個定時器給清了，重新setTimout

  function debounce(fn, delay) {
    let timerId
    return function(...args){
      clearTimeout(timerId)
      timerId = setTimeout(()=> {
        fn(...args)
      }, delay)
    }
  }
複製程式碼

測試demo：

  <input type="text" id="input">
  
  document.querySelector('#input').addEventListener('input', debounce(handleOnInput, 1500))
  
  function handleOnInput(arg) {
    console.log(arg.target.value);
  }
複製程式碼

使勁兒跟那兒輸入看看列印的結果呢~(跟防止使勁兒點一個button一個道理)

2.恁高階測試之：節流

最常見的就是scorll事件滾一下觸發太多次了，我們想讓它在一個時間段內只執行一次（就是讓它均勻的被觸發，而不是咔咔咔一直觸發）

  function throttle(fn, interval, lock=false){
    return function(...args) {
      if(lock) return;
      lock = true
      fn(...args)
      setTimeout(() => {
        lock = false
      }, interval);
    }
  }
複製程式碼

意思是：目標函式在執行的時候，用一個變數控制再來控制是否能再次執行，我們會在setTimeout裡週期性的把lock置為false.

小夥兒，聽說你愛測效能對吧？

相關文章