區分函式防抖&函式節流

依心而為發表於2021-03-02

1. 概念區分

函式防抖:觸發事件後,在n秒內函式只能執行一次,如果觸發事件後在n秒內又觸發了事件,則會重新計算函式延執行時間。
簡單說:
頻繁觸發, 但只在特定的時間內才執行一次程式碼,如果特定時間內重新觸發,break打斷之後重新開始執行;

函式節流:在極少數情況下,函式的觸發不是由使用者直接出發的。在這些情況下,函式有可能被頻繁的呼叫,造成大的效能問題
簡單說:
頻繁觸發,只在特定的時間內執行一次,continue繼續執行完;

2. 原理區分

看定義,你可能一會就忘記了,什麼是函式防抖,什麼是函式節流,最容易出錯的就是函式防抖和函式節流還給混淆了。

今天看了,明天就把函式防抖和函式節流給搞反了。這是事實,不過我發現了小巧門,就跟初中、高中的數學公式一樣。不用死記硬背,搞懂原理,順著原理就推匯出來,誰還記概念呢!

咋們舉個網上絕無僅有的例子,唯我獨創,哈哈,自戀了!


就拿咋用蒼蠅拍打蒼蠅一樣,什麼時候是函式防抖,什麼時候是函式節流呢?


當你看電視的時候,兩隻蒼蠅在電視機螢幕上來回的移動,實在是煩。於是你拿起了你手旁的蒼蠅拍,準備把該死的蒼蠅拍死在電視機上。
假設,拍打一次算一次特定的時間,拍打一次還打住了蒼蠅算函式完成。

  1. 我們拍打一次算一次完整的執行動作;
  2. 假設蒼蠅一直在不停的起飛,重新降落;我們的手還沒打下去,蒼蠅就重新換位置了,如此重複;怕打壞電視螢幕,我們的手一直處於拍打前的抖動狀態,防止我們的手因為蒼蠅的移動,不敢拍下去,而處於一種抽搐的狀態。

函式防抖:就是等蒼蠅落穩了,我們進行一次拍打動作,如果蒼蠅飛走了,我們停在半空的手,沒有拍打到電視上,重新處於拍打前的狀態。(拍打一次算一次特定的時間,此時還沒有拍下去)。

對應的解釋:拍打一次算一次的特定的時間,如果蒼蠅飛走了,此時蒼蠅拍還沒有拍下,我們重新拍打蒼蠅,還沒拍下,蒼蠅又飛走了,如此周而復始,我們一直處於抖動狀態,所以,我們拍打到蒼蠅飛走,不能算一個特定的時間,待蒼蠅落定之後,直到蒼蠅落定,蒼蠅拍拍下之後算一次特定時間,否則時間重新開始計算;

函式節流:就是等蒼蠅落穩了,我們進行一次拍打動作,此時蒼蠅飛走了,但是,你覺得拍打下去的時候,可能傷到它,該死的蒼蠅就不會在電視上亂飛,干擾你看電視,所以你毅然決然的把拍打到了電視螢幕上(拍打一次算一次特定的時間,此時動作完成了)。

對應的解釋:還是拍打一次算一次的特定時間,即使蒼蠅飛走了,但是蒼蠅拍拍打下之後,有可能傷及到蒼蠅,或者蒼蠅不再討厭的在電視螢幕上亂飛,我們不像防抖那樣,重新歸為計算,我們要直接把蒼蠅拍拍下,完成一次特定時間的拍打動作,這期間蒼蠅有飛到別的地方,我們重新開始一次特定時間的拍打蒼蠅動作。

3. 總結

我們只要記住,拍打一次蒼蠅為一個特定的時間,函式防抖就是,蒼蠅一直飛來飛去,我們一直沒有完成一次特定時間,蒼蠅飛走一次,我們重新拍打一次算特定時間的開始,直到拍打蒼蠅結束為一次計算時間的週期,之前沒有拍下的動作週期都結束重新開始;函式節流就是,不管蒼蠅飛走了還是沒有飛走,都要拍打一次,直到拍打蒼蠅結束,算一次計算時間的週期;

英文單詞記不記得住,哦,這個不在我的教學範圍內。我也記不住!如果記不住,那就只記住一個,那記不住的及時另一個!這是最笨的方法。但是,挺有效的!?

相關文章