函式節流與函式防抖

2022-03-25 11:28:59 字數 898 閱讀 3257

函式防抖debounce

ps:單反拍照的時候在你按下拍照的瞬間拍攝了多張**,然後通過合成比對,生成了一張**.翻譯成js就是,事件內的n個動作會變忽略,只有事件後`由程式觸發`的動作只是有效

實現思路如下,將目標方法(動作)包裝在settimeout裡面,然後這個方法是乙個事件的**函式,如果這個**一直執行,那麼這些動作就一直不執行。為什麼不執行呢,我們搞了乙個cleartimeout,這樣settimeout裡的方法就不會執行! 為什麼要cleartimeout呢,我們就需要將事件內的連續動作刪掉嘛!待到使用者不觸發這事件了。那麼settimeout就自然會執行這個方法

//

input輸入框架的格式驗證假如只是驗證都是字母也罷了,太簡單了,不怎麼耗效能,如果是驗證是否身份證,這效能消耗大,你可以隔170ms才驗證一次

函式防抖非立刻執行版本

function

debounce(func, delay) ,delay)

};};var validate = debounce(function

(e) , 380);

//繫結監聽

document.queryselector("input").addeventlistener('input', validate);

函式節流

function

throttle(fn, threshhold)

else

, threshhold);}}}

var mousemove = throttle(function

(e) );

//繫結監聽

document.queryselector("#panel").addeventlistener('mousemove', mousemove);

函式防抖與函式節流

函式防抖 debounce 當呼叫動作過n毫秒後,才會執行該動作,若在這n毫秒內又呼叫此動作則將重新計算執行時間 函式節流 throttle 預先設定乙個執行週期,當呼叫動作的時刻大於等於執行週期則執行該動作,然後進入下乙個新週期 函式節流 throttle 與函式防抖 debounce 都是為了限...

函式節流與函式防抖

這裡以判斷頁面是否滾動到底部為例,普通的做法就是監聽window物件的scroll事件,然後再函式體中寫入判斷是否滾動到底部的邏輯 這樣做的乙個缺點就是比較消耗效能,因為當在滾動的時候,瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯,而在實際的場景中是不需要這麼做的,在實際場景中可能是這樣的 在滾...

函式防抖與函式節流

前言 有一些瀏覽器事件我們不希望它很頻繁的觸發,如調整視窗大小 onresize 監聽滾動條滾動 onscroll 如果這些監聽事件需要呼叫介面的話一秒內可能會呼叫上百次,這樣坑定是有問題的。函式防抖 debounce 如果有人進電梯 觸發事件 那電梯將在10秒鐘後出發 執行事件 這時如果又有人進電...