淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)-創(chuàng)新互聯(lián)

前言

成都創(chuàng)新互聯(lián)公司專注于貴港企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計,成都商城網(wǎng)站開發(fā)。貴港網(wǎng)站建設(shè)公司,為貴港等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

有echarts使用經(jīng)驗的同學可能遇到過這樣的場景，在window.onresize事件回調(diào)里觸發(fā)echartsBox.resize()方法來達到重繪的目的，resize事件是連續(xù)觸發(fā)的這意味著echarts實例會連續(xù)的重繪這是非常耗性能的。還有一個常見的場景在input標簽的input事件里請求后端接口，input事件也是連續(xù)觸發(fā)的，假設(shè)我輸入了“12”就會請求兩次接口參數(shù)分別是“1”和“12”，比浪費網(wǎng)絡(luò)資源更要命的是如果參數(shù)為“1”的請求返回數(shù)據(jù)的時間晚于參數(shù)為“12”的接口，那么我們得到的數(shù)據(jù)是和期望不符的。當然基于axios可以做很多封裝可以取消上一個請求或者通過攔截做處理，但還是從防抖入手比較簡單。

防抖和節(jié)流到底是啥

函數(shù)防抖（debounce）

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

案例：持續(xù)觸發(fā)scroll事件時，并不立即執(zhí)行handle函數(shù)，當1000毫秒內(nèi)沒有觸發(fā)scroll事件時，才會延時觸發(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))

名稱欄目：淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)-創(chuàng)新互聯(lián)
文章位置：http://muchs.cn/article18/dhijdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、微信小程序、定制網(wǎng)站、App開發(fā)、響應(yīng)式網(wǎng)站、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)