節流

節流，走字面上理解就是節約流量。比作水就話就是讓水流的少一點，節約一點。對應到JS當中，就是在scroll事件和mousemove事件的時候，瀏覽器會很頻繁的被觸發，會導致對應的事件也會被很頻繁的觸發，這樣就會使得瀏覽器資源消耗很大，此時就需要節流。

前面說過了，節流只是把水關小一點，同樣，我們在JS中的節流就是讓事件觸發的不那麼頻繁。

        function throttle(func, ms = 1000) {
          let canRun = true
          return function (...args) {
            if (!canRun) return
 
 //如果是false 就終止
            canRun = false
            setTimeout(() => {
              func.apply(this, args) //將this指向指向為事件觸發時的this
              canRun = true
            }, ms)
          }
        }
        
        // 測試
        const task = () => { console.log('run task') }
        const throttleTask 
 
= throttle(task, 1000)
        window.addEventListener('mousemove', throttleTask)

去抖

去抖，用淘寶頁面舉例子，當我們在搜尋輸入詞彙時，他會根據詞彙自動的去獲取後臺與之相關聯的資料。但是如果在我們沒輸入一個字元時都去響應，這也響應的泰國頻繁且響應的資料都是無效的。那麼我們就需要用到去抖，即在判斷使用者是否還要輸入，如果不輸入了再去發起請求。

function debounce(func, ms = 1000) {
          let timer;
          return function (...args) {
            
 
if (timer) { 
              clearTimeout(timer)
            }
            // console.log(timer)
            timer = setTimeout(() => {
              func.apply(this, args) //將this繫結為執行環境的this
            }, ms)
          }
        }
        // 測試
        const task = () => { console.log('run task') }
        const debounceTask = debounce(task, 1000)
        window.addEventListener('mousemove', debounceTask)

節流與防抖的區別就是，節流是多少秒執行一次，而防抖是隻會執行一次。

## 節流
節流，走字面上理解就是節約流量。比作水就話就是讓水流的少一點，節約一點。對應到JS當中，就是在scroll事件和mousemove事件的時候，瀏覽器會很頻繁的被觸發，會導致對應的事件也會被很頻繁的觸發，這樣就會使得瀏覽器資源消耗很大，此時就需要節流。
前面說過了，節流只是把水關小一點，同樣，我們在JS中的節流就是讓事件觸發的不那麼頻繁。
```jsfunction throttle(func, ms = 1000) { let canRun = true return function (...args) { if (!canRun) return //如果是false 就終止 canRun = false setTimeout(() => { func.apply(this, args) //將this指向指向為事件觸發時的this canRun = true }, ms) }}// 測試const task = () => { console.log('run task') }const throttleTask = throttle(task, 1000)window.addEventListener('mousemove', throttleTask)```
## 去抖
去抖，用淘寶頁面舉例子，當我們在搜尋輸入詞彙時，他會根據詞彙自動的去獲取後臺與之相關聯的資料。但是如果在我們沒輸入一個字元時都去響應，這也響應的泰國頻繁且響應的資料都是無效的。那麼我們就需要用到去抖，即在判斷使用者是否還要輸入，如果不輸入了再去發起請求。
```jsfunction debounce(func, ms = 1000) { let timer; return function (...args) { if (timer) { clearTimeout(timer) }// console.log(timer) timer = setTimeout(() => { func.apply(this, args) //將this繫結為執行環境的this }, ms) }}// 測試const task = () => { console.log('run task') }const debounceTask = debounce(task, 1000)window.addEventListener('mousemove', debounceTask)```