<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                >[success] # 防抖 1. 為了解決對于某些**頻繁**的事件處理會造成性能的**損耗** 2. 在用戶頻繁觸發某個行為的時候,我們只識別一次即可'**開始邊界**:第一次點擊觸發 **結束邊界**:等到最后一次觸發',當用戶快速點擊一個按鈕,實際本質我們僅僅只是他最后一次點擊執行成功即可,**剩下之前的點擊可以忽略** 3. 常用的防抖場景,**輸入框中頻繁的輸入內容**,**搜索或者提交信息**,**頻繁的點擊按鈕觸發某個事件**,**監聽瀏覽器滾動事件**,**用戶縮放瀏覽器的resize事件** ![](https://img.kancloud.cn/fb/10/fb10da679effa60f74bf6c7379db0fe7_834x297.png) >[danger] ##### 代碼案例 ~~~ /* * debounce:函數防抖 * @params * func:自己最終要執行的任務 * time:多久操作一次算是頻繁觸發「默認值:500ms」 * immediate:控制觸發的邊界 「默認值:false結束邊界 true開始邊界」 * @return * operate處理函數,處理函數會在頻繁觸發的時候,頻繁執行;函數內部,控制我們想要操作的func只執行一次; */ const debounce = function (fn, time, immediate) { if (typeof func !== 'function') throw new TypeError('func must be an function!') if (typeof time === 'boolean') immediate = time if (typeof time !== 'number') time = 500 if (typeof immediate !== 'boolean') immediate = false let timer = null return (...args) => { // 當定時器一次沒有執行過并且是立即執行則立即執行 let now = !timer && immediate, if (timer) { clearTimeout(timer) timer = null } timer = setTimeout(() => { clearTimeout(timer) timer = null if (!now) fn.apply(this,args) }, time) if (now) func.apply(this, args) } } ~~~ >[danger] ##### 代碼案例 二 1.下面代碼具備功能 **防抖時間設置 和 是否能立即執行 取消當前防抖計時** 操作 2. 要注意點就是 下面案例中`inner` 函數不能是箭頭函數,否則因為this指向了最外層函數導致this不是所期待調用內部函數this指向 3. 分清調用關系,在`debounce` 僅是一個聲明,實際執行的防抖是內部`inner` 只是利用了閉包去緩存了某些變量 4. `debounce` 參數 `fn` 作為回調參數,他的執行時機其實在`inner` 中,因此實際要將`fn` 變成和`inner` 具備一樣的參數和this指向 5. 拆解看 當我們執行一個`oninput` 事件綁定時候 `inputEl.oninput = function(event){}` 其實綁定這個函數 就是我們防抖的`inner`,因此 **inner** 接受的參數和例子中`function(event){}` 等同的,執行我們將執行二次轉交給了回調函數`fn` ~~~ function debounce(fn, delay, immediate = false) { let timer = null // 原則: 一個函數進行做一件事情, 一個變量也用于記錄一種狀態 // 因此記錄立即執行變量在這里 有重新定義了一個 let isInvoke = false // 清除setTimeout function clear() { clearTimeout(timer) timer = null } // 真正執行函數,即若是觸發事件的話則是觸發事件執行函數 // 這里不能使用箭頭函數 ,如果使用了導致fn.apply this 指向了window function inner(...args) { // 第一次操作是不需要延遲 if (immediate && !isInvoke) { fn.apply(this, args) isInvoke = true return } if (timer) clear() timer = setTimeout(() => { // 將真正執行函數傳入接受的值,給到傳入的回調函數 fn.apply(this, args) clear() }, delay) } // 取消 當前定時間 讓函數直接執行 inner.cancel = function () { ~~~ * 使用 時候也要注意不要用箭頭函數 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style></style> </head> <body> <div id="main"> <input /> <button class="cancel">取消</button> </div> </body> <script> const inputEl = document.querySelector('input') const cancelBtn = document.querySelector('.cancel') function debounce(fn, delay, immediate = false) { let timer = null // 原則: 一個函數進行做一件事情, 一個變量也用于記錄一種狀態 // 因此記錄立即執行變量在這里 有重新定義了一個 let isInvoke = false // 清除setTimeout function clear() { clearTimeout(timer) timer = null } // 真正執行函數,即若是觸發事件的話則是觸發事件執行函數 // 這里不能使用箭頭函數 ,如果使用了導致fn.apply this 指向了window function inner(...args) { // 第一次操作是不需要延遲 if (immediate && !isInvoke) { fn.apply(this, args) isInvoke = true return } if (timer) clear() timer = setTimeout(() => { // 將真正執行函數傳入接受的值,給到傳入的回調函數 fn.apply(this, args) clear() }, delay) } // 取消 當前定時間 讓函數直接執行 inner.cancel = function () { if (timer) clear(timer) } return inner } // 這里不能使用 箭頭函數,使用了 猶豫箭頭函數不受 apply 綁定會出現this 問題 // inputEl.oninput = debounce((event) => { // console.log(event.target.value, this) // }, 500) // inputEl.oninput = debounce(function (event) { // console.log(event.target.value, this) // }, 500) const debounceFn = debounce(function (event) { console.log(`發送網絡請求${counter++}:`, this, event) }, 5000) inputEl.oninput = debounceFn // 4.實現取消的功能 cancelBtn.onclick = function () { debounceFn.cancel() } </script> </html> ~~~ >[danger] ##### 案例三 -- 使用Promise 讓其具備獲取返回值 1. 目前看這種和事件搭配使用意義不大 ~~~ // 原則: 一個函數進行做一件事情, 一個變量也用于記錄一種狀態 function hydebounce(fn, delay, immediate = false, resultCallback) { // 1.用于記錄上一次事件觸發的timer let timer = null let isInvoke = false // 2.觸發事件時執行的函數 const _debounce = function(...args) { return new Promise((resolve, reject) => { try { // 2.1.如果有再次觸發(更多次觸發)事件, 那么取消上一次的事件 if (timer) clearTimeout(timer) // 第一次操作是不需要延遲 let res = undefined if (immediate && !isInvoke) { res = fn.apply(this, args) if (resultCallback) resultCallback(res) resolve(res) isInvoke = true return } // 2.2.延遲去執行對應的fn函數(傳入的回調函數) timer = setTimeout(() => { res = fn.apply(this, args) if (resultCallback) resultCallback(res) resolve(res) timer = null // 執行過函數之后, 將timer重新置null isInvoke = false }, delay); } catch (error) { reject(error) } }) } // 3.給_debounce綁定一個取消的函數 _debounce.cancel = function() { if (timer) clearTimeout(timer) timer = null isInvoke = false } // 返回一個新的函數 return _debounce } ~~~ * 使用 ~~~ const myDebounceFn = hydebounce(function(name, age, height) { console.log("----------", name, age, height) return "哈哈哈哈" }, 1000, false) myDebounceFn("w", 18, 1.88).then(res => { console.log("拿到執行結果:", res) // 哈哈哈哈 }) ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看