Input框防抖動

go4it 發(fā)布于2019-08-23 11:34 / 2728人閱讀

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

什么是抖動?

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

實現(xiàn)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97148.html

JavaScript 五十問——認真聊一聊去抖與節(jié)流

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

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

摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...

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

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

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

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

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

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

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