js 函式節流 與 防抖動

2022-03-06 10:16:46 字數 637 閱讀 4386

函式節流:就如同成都搖號買房,前乙個進去選房了,下乙個就要等一段時間。這種策略就很好的解決了,一大波人進去選房,銷售妹妹沒發接待的尷尬局面。

應用場景:監聽瀏覽器滾動條,然後觸發函式。

// 普通做法

document.getelementbyid("throttle").onscroll = function();

// 函式節流

var canrun = true;

document.getelementbyid("throttle").onscroll = function()

canrun = false;

settimeout(function(), 300);

};

函式防抖動: 就如同選妹子,來了一佇列妹子讓你選,你只選最後乙個,因為前面的太醜了。

應用場景: input 設定了onchange 事件,一旦有改動,就會觸發change事件,不停改動,就不停觸發。其實,我們只需要最後輸入的值。

// 函式防抖 

var timer = false;

document.getelementbyid("input").onchange = function(), 300);

};

js 防抖動與節流

針對一些會頻繁觸發的事件如scroll resize,如果正常繫結事件處理函式的話,有可能在很短的時間內多次連續觸發事件,十分影響效能。因此針對這類事件要進行防抖動或者節流處理 它的做法是限制下次函式呼叫之前必須等待的時間間隔。正確實現 debouncing 的方法是將若干個函式呼叫合成 一次,並在...

防抖動與節流

針對一些會頻繁觸發的事件如scroll resize,如果正常繫結事件處理函式的話,有可能在很短的時間內多次連續觸發事件,十分影響效能。所以我們對於這種事件我們要進行防抖動或者節流的處理來優化效能。防抖動 將幾次操作合併為一此操作進行。原理是維護乙個計時器,規定在delay時間後觸發函式,但是在de...

防抖動與節流

針對一些會頻繁觸發的事件如scroll resize,如果正常繫結事件處理函式的話,有可能在很短的時間內多次連續觸發事件,十分影響效能。它的做法是限制下次函式呼叫之前必須等待的時間間隔。正確實現debouncing的方法是將若干個函式呼叫合成一次,並在給定時間過去之後僅被呼叫一次。123 4567 ...