前言

在日常開發(fā)中有很多場景我們都需要用到節(jié)流函數(shù)和防抖函數(shù),比如:實現(xiàn)輸入框的模糊查詢因為需要輪詢ajax,影響瀏覽器性能,所以需要用到節(jié)流函數(shù);實現(xiàn)手機號、姓名之類的的驗證,往往我們只需要驗證一次,這個時候我們就需要用到防抖函數(shù);但是網上的很多資料都是不夠具體和便于理解。今天自己翻閱了一些資料之后,來簡單的談談我對節(jié)流函數(shù)和防抖函數(shù)的理解,希望能幫助大家理解;
節(jié)流函數(shù)
顧名思義,就是節(jié)省流量節(jié)省內存性能的一種函數(shù),可以理解為是一種性能優(yōu)化方案;
舉個例子:一個水龍頭一直在滴水,可能一次性會滴很多水,但是我們想控制它的頻率 ,讓它每1000毫秒滴一滴水,這個時候我們就可以用到節(jié)流函數(shù)來進行控制(簡單可以理解為類似于周期性定時器)
js代碼(可直接復制到編輯器上看效果):
//首先定義一個全局變量
var canRun = true;
//當瀏覽器窗口大小發(fā)生變化也就是重新計算窗口大小的時候觸發(fā)
window.onresize = function(){
// 取反,canRun為false的情況下
if(!canRun){
//直接return,后面的代碼不執(zhí)行
return
}
//走到這來就是canRun為true的情況,然后進行賦值為false
canRun = false
//設置一個定時器進行輪詢操作
setTimeout( function () {
//這是要做的事情
console.log("函數(shù)節(jié)流")
//最后記得重新賦值true繼續(xù)讓他取反
canRun = true
//每隔1000毫秒也就是1秒鐘就執(zhí)行一次
}, 1000)
}
名稱欄目:一文看懂如何簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)-創(chuàng)新互聯(lián)
本文來源:http://chinadenli.net/article30/cosdpo.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供全網營銷推廣、網站內鏈、商城網站、網站改版、ChatGPT、微信小程序
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容