Input框防抖動

go4it 發布于2019-08-23 11:34 / 2677人閱讀

摘要：什么是抖動在框輸入的時候，當我們監聽事件的時候，由于事件是一旦輸入框內容發生改變就觸發我們綁定的回調函數，在實際當中我們往往會根據輸入框內容去發送一些請求，這樣一旦改變就觸發無疑是耗時的，而且影響性能這個時候，我們就可以使用防抖動。

什么是抖動?

在input框輸入的時候，當我們監聽input事件的時候，由于input事件是一旦輸入框內容發生改變就觸發我們綁定的回調函數，在實際當中我們往往會根據輸入框內容去發送一些請求，這樣一旦改變就觸發無疑是耗時的，而且影響性能,這個時候，我們就可以使用防抖動。實現的大概思路就是我們可以自定義隔多長時間來觸發我們的處理操作(例如ajax請求數據等)

實現

var timer = null
element.input = function () {
    clearTimeout(timer) // 每次進來的時候都將之前的清除掉，如果還沒到一秒的時候就將之前的清除掉，這樣就不會觸發之前setTimeout綁定的事件， 如果超過一秒，之前的事件就會被觸發下次進來的時候同樣清除之前的timer
    timer = setTimeout(function () {
        // 在這里進行我們的操作  這樣就不會頻繁的進行我們這里面的操作了
    }, 1000)
}

GPU云服務器云服務器圖片抖動抖動抖動層抖動窗口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97148.html

JavaScript 五十問——認真聊一聊去抖與節流

摘要：前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題。總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題。總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔；而去抖動會指定事件不觸發的時間間隔...

chadLi 2019-08-02 14:05 評論0 收藏0
JavaScript 五十問——認真聊一聊去抖與節流

摘要：前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題。總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題。總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔；而去抖動會指定事件不觸發的時間間隔...

EscapedDog 2019-08-23 14:38 評論0 收藏0
通過focusout事件解決IOS鍵盤收起時界面不歸位的問題

摘要：原因經查是輸入框的事件無法冒泡。這時，我們問題得到解決了，當從輸入框輸入內容，然后點擊鍵盤的完成收起鍵盤，效果符合我們的預期。輸入框失去焦點，要把鍵盤推出頁面的滾動部分還原。問題癥狀今天在開發一個移動端的 H5 頁面時，遇到了 IOS 上鍵盤收起時界面無法歸位的問題。下面詳細描述下問題和癥狀：頁面結構出問題的頁面是一個表單結構。即類似于一個 div 下有4個 input 表單的...

vvpale 2019-08-02 15:34 評論0 收藏0
通過focusout事件解決IOS鍵盤收起時界面不歸位的問題

摘要：原因經查是輸入框的事件無法冒泡。這時，我們問題得到解決了，當從輸入框輸入內容，然后點擊鍵盤的完成收起鍵盤，效果符合我們的預期。輸入框失去焦點，要把鍵盤推出頁面的滾動部分還原。問題癥狀今天在開發一個移動端的 H5 頁面時，遇到了 IOS 上鍵盤收起時界面無法歸位的問題。下面詳細描述下問題和癥狀：頁面結構出問題的頁面是一個表單結構。即類似于一個 div 下有4個 input 表單的...

lifesimple 2019-08-26 18:37 評論0 收藏0
JavaScript復制內容到剪貼板

摘要：原文鏈接最近一個活動頁面中有一個小需求，用戶點擊或者長按就可以復制內容到剪貼板，記錄一下實現過程和遇到的坑。完整代碼如下復制成功總結以上就是關于如何實現復制內容到剪貼板，附上幾個鏈接兼容性原文鏈接：https://github.com/axuebin/ar... 最近一個活動頁面中有一個小需求，用戶點擊或者長按就可以復制內容到剪貼板，記錄一下實現過程和遇到的坑。常見方法查了一下...

ideaa 2019-08-22 14:54 評論0 收藏0