一文看懂如何簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)-創(chuàng)新互聯(lián)

前言

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比紫金網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式紫金網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋紫金地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

在日常開發(fā)中有很多場景我們都需要用到節(jié)流函數(shù)和防抖函數(shù)，比如：實現(xiàn)輸入框的模糊查詢因為需要輪詢ajax，影響瀏覽器性能，所以需要用到節(jié)流函數(shù)；實現(xiàn)手機號、姓名之類的的驗證，往往我們只需要驗證一次，這個時候我們就需要用到防抖函數(shù)；但是網(wǎng)上的很多資料都是不夠具體和便于理解。今天自己翻閱了一些資料之后，來簡單的談?wù)勎覍?jié)流函數(shù)和防抖函數(shù)的理解，希望能幫助大家理解；

節(jié)流函數(shù)

顧名思義，就是節(jié)省流量節(jié)省內(nèi)存性能的一種函數(shù)，可以理解為是一種性能優(yōu)化方案；

舉個例子：一個水龍頭一直在滴水，可能一次性會滴很多水，但是我們想控制它的頻率 ，讓它每1000毫秒滴一滴水，這個時候我們就可以用到節(jié)流函數(shù)來進行控制（簡單可以理解為類似于周期性定時器）

js代碼（可直接復(fù)制到編輯器上看效果）：

//首先定義一個全局變量
var canRun = true;
//當(dāng)瀏覽器窗口大小發(fā)生變化也就是重新計算窗口大小的時候觸發(fā)
window.onresize = function(){
// 取反，canRun為false的情況下
if(!canRun){
//直接return，后面的代碼不執(zhí)行
 return
}
//走到這來就是canRun為true的情況，然后進行賦值為false
canRun = false

//設(shè)置一個定時器進行輪詢操作
setTimeout( function () {
//這是要做的事情
 console.log("函數(shù)節(jié)流")
//最后記得重新賦值true繼續(xù)讓他取反
 canRun = true
//每隔1000毫秒也就是1秒鐘就執(zhí)行一次

 }, 1000)
}

名稱欄目：一文看懂如何簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)-創(chuàng)新互聯(lián)
本文來源：http://muchs.cn/article30/cosdpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站內(nèi)鏈、商城網(wǎng)站、網(wǎng)站改版、ChatGPT、微信小程序

廣告

聲明：本網(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)