前言

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

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

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

函數(shù)防抖（debounce）

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

案例：持續(xù)觸發(fā)scroll事件時，并不立即執(zhí)行handle函數(shù)，當1000毫秒內沒有觸發(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://chinadenli.net/article18/dhijdp.html

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

廣告

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