蝦扯蛋之函數防抖和節流 - 掘金
先貼貼 這個哥們的。 因為我看了很多，感覺大多都是復制。沒有啥思考

在介紹以下這些問題的時候。先公示下我思考的時候出現的問題
1、如果你使用 onclick 和 addEventListenter 需要明白他們的區別 ，其實沒啥好說的但是有一點請記住 onclick 不能使用閉包或者匿名函數。

2、那就是 在閉包的情況下 函數內部的變量為什么還是可以被return出來的function保持訪問等等，可以從call stack和scope獨立的角度來理解 。（這個我暫時也是迷糊的）但是以閉包的角度看就沒啥問題。具體詞法作用域的問題 堆 棧問題 可以以后深入

以上問題大致了解之后看我們的重點

一、防抖

概念：當持續觸發事件時， 合并事件且不會去觸發事件，當一定時間內沒有觸發再這個事件時，才真正去觸發事件（當然分立即執行或者延遲執行）。

什么是防抖？能不能通俗點？舉幾個栗子

1、武俠 高手對付低手，一瞬間就給低手100次，100次全部打中。但是碰到另一個高手，打了100次 就就打中了2次

2、上公交 本來是1個人上車就 司機就關門開車， 但是一下來了很多人，于是就都上了 才關門開車

<script>var xcd = document.getElementById('xcd');var count = 1;//要執行的操作 數字+1function doSomething() {xcd.innerHTML = count++;};function debounce(doSomething, wait) {var timeout; return function () {var _this = this,_arguments = arguments;console.log(timeout); // 點擊次數clearTimeout(timeout);timeout = setTimeout(function () {doSomething.apply(_this, _arguments);}, wait);}}xcd.onclick = debounce(doSomething, 1000);
</script>

上述 會出現啥效果呢

就是我連續點擊 count 就加1 然后顯示出來，如果我超過一秒沒有點擊 再點一次就再加1
到這里你應該徹底明白啥事防抖了

如下圖

以上就是最基本的防抖措施

二、函數節流

概念：持續觸發事件時，throttle 會合并一定時間內的事件，并在該時間結束時真正去觸發一次事件

這個不是很繞口 ，可以理解啊。 就是一定時間內 只能觸發一次

   function doSomething1() {xcd1.innerHTML = count++;};const throttle = (func, wait, ...args) => {let pre = 0;return function () {const context = this;let now = Date.now();console.log(now);if (now - pre >= wait) {func.apply(context, args);pre = Date.now();}}}xcd1.onclick = throttle(doSomething1, 1000);

當然你們還可以擴展

總結

以上是生活随笔為你收集整理的防抖 节流_关于防抖和节流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。