亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    什么叫vue防抖

    在vue中,防抖是指在事件被觸發(fā)n秒后再執(zhí)行回調(diào),如果在這n秒內(nèi)又被觸發(fā),則重新計(jì)時(shí);也就是說:當(dāng)持續(xù)觸發(fā)某事件時(shí),一定時(shí)間間隔內(nèi)沒有再觸發(fā)事件時(shí),事件處理函數(shù)才會(huì)執(zhí)行一次,如果設(shè)定的時(shí)間間隔到來之前,又一次觸發(fā)了事件,就重新開始延時(shí)。

    什么叫vue防抖

    本教程操作環(huán)境:windows7系統(tǒng)、vue3版,DELL G3電腦。

    談到vue項(xiàng)目的優(yōu)化,防抖節(jié)流真心需要了解一下,下面就來聊聊防抖。

    防抖(debounce)

    在事件被觸發(fā)n秒后再執(zhí)行回調(diào),如果在這n秒內(nèi)又被觸發(fā),則重新計(jì)時(shí);

    解釋:當(dāng)持續(xù)觸發(fā)某事件時(shí),一定時(shí)間間隔內(nèi)沒有再觸發(fā)事件時(shí),事件處理函數(shù)才會(huì)執(zhí)行一次,如果設(shè)定的時(shí)間間隔到來之前,又一次觸發(fā)了事件,就重新開始延時(shí)。

    通俗理解,就是我們在點(diǎn)擊請求或者點(diǎn)擊加載等過程中,只需要點(diǎn)擊一次,但由于請求慢,點(diǎn)擊了好多次,導(dǎo)致多次請求,防抖就是在點(diǎn)擊了好多次之后的最后一次才會(huì)請求。

    案例1:

    持續(xù)觸發(fā)scroll事件時(shí),并不立即執(zhí)行handle函數(shù),當(dāng)1000毫秒內(nèi)沒有觸發(fā)scroll事件時(shí),才會(huì)延時(shí)觸發(fā)一次handle函數(shù)。

    function debounce(fn, wait) {  let timeout = null  return function() {   if(timeout !== null) clearTimeout(timeout)      timeout = setTimeout(fn, wait);  } } function handle() {    console.log(Math.random()) } window.addEventListener('scroll', debounce(handle, 1000))

    addEventListener的第二個(gè)參數(shù)實(shí)際上是debounce函數(shù)里return回的方法,let timeout = null 這行代碼只在addEventListener的時(shí)候執(zhí)行了一次 觸發(fā)事件的時(shí)候不會(huì)執(zhí)行,那么每次觸發(fā)scroll事件的時(shí)候都會(huì)清除上次的延時(shí)器同時(shí)記錄一個(gè)新的延時(shí)器,當(dāng)scroll事件停止觸發(fā)后最后一次記錄的延時(shí)器不會(huì)被清除可以延時(shí)執(zhí)行,這是debounce函數(shù)的原理

    案例2:

    <!DOCTYPE html> <html> <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>防抖</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body>     <div id="app">         輸入內(nèi)容:<input type="text"  @keyup="deb"/>         <div> 輸入次數(shù):{{num}}</div>     </div>     <script>         let time         var app=new Vue({             el:'#app',             data:{                 num:0,             },             methods:{                 deb: function () { let that = this if (time) { clearTimeout(time) } time = setTimeout(function () {                             that.num++ console.log('輸入了'+that.num+'次') time = undefined; }, 2000) }             }         })     </script> </body> </html>

    效果圖:(輸入一次文字2秒后執(zhí)行,多次輸入,還是執(zhí)行一次,輸入次數(shù)只加1):

    全局定義的time是undefind , 在連續(xù)輸入的過程中,多次觸發(fā)keyup事件,定時(shí)器每次都會(huì)重新渲染,僅當(dāng)輸入間隔超過(或等于)所設(shè)時(shí)間2秒時(shí),num++才會(huì)執(zhí)行。

    什么叫vue防抖

    搭配鍵盤修飾符:(.enter為例)

        <div id="app">         輸入內(nèi)容:<input type="text" class="input"  @keyup.enter="deb"/>         <div> 輸入次數(shù):{{num}}</div>     </div>

    這樣連續(xù)按回車后,也只會(huì)觸發(fā)一次 輸入 ,每次按回車間隔設(shè)置的兩秒,才會(huì)觸發(fā)一次。

    所以,考慮到會(huì)出現(xiàn)連續(xù)點(diǎn)擊了提交按鈕,連續(xù)觸摸的情況,防抖是很有必要的。

    當(dāng)然,也有另外的解決方式,比如項(xiàng)目里用的是控制按鈕的方式,點(diǎn)擊保存,在請求接口返回200之前,按鈕禁止使用,這里就不會(huì)出現(xiàn)重復(fù)點(diǎn)擊了。

    【相關(guān)視頻教程推薦:vue視頻教程、web前端入門】

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)