Input框防抖動(dòng)

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

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

什么是抖動(dòng)?

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

實(shí)現(xiàn)

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

云服務(wù)器 GPU云服務(wù)器圖片抖動(dòng) 抖動(dòng) 抖動(dòng)層抖動(dòng)窗口

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97148.html

相關(guān)文章

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

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

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

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

EscapedDog 2019-08-23 14:38 評(píng)論0 收藏0
通過(guò)focusout事件解決IOS鍵盤收起時(shí)界面不歸位的問(wèn)題

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

vvpale 2019-08-02 15:34 評(píng)論0 收藏0
通過(guò)focusout事件解決IOS鍵盤收起時(shí)界面不歸位的問(wèn)題

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

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

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

ideaa 2019-08-22 14:54 評(píng)論0 收藏0