先做一個監聽鼠標移動的base:

<style>#content{height:150px;width:200px;text-align:center;color:#fff;background-color:#ccc;font-size: 70px;} </style> <div id="content"></div> <script>let content = document.getElementById('content');let num = 0;function count () {content.innerHTML = num++};content.onmousemove = count; </script>

// 鼠標在灰色方塊內移動時,數字會瘋狂的漲.

防抖(debounce): 是指觸發事件在n秒內函數只能執行一次,如果在n秒內又觸發了事件,則會重新計算函數執行時間

// 非立即執行: 本例中是指,鼠標移動,然后再某個地方停留s秒后,才執行函數 function debounce(func, wait) {let timeout;return function () {let self = this;let args = arguments;if (timeout ) clearTimeout(timeout);timeout = setTimeout( () => {func.apply(self, args);}, wait);} } content.onmousemove = debounce( count, 1*1000);// 立即執行: 立即執行,然后等待s秒(中途若移動則重新計算)后,然后立即執行,再等待s秒 function debounce(func, wait) {let timeout;return function () {let self = this;let args = arguments;if ( timeout ) clearTimeout( timeout ) ;let callNow = !timeout;timeout = setTimeout( () => {timeout = null;}, wait)if ( callNow ) func.apply(self, args);} }// 混合防抖(immediate為真代表立即執行) function debounce(func, wait, immediate=false) {let timeout;return function () {let self = this;let args = arguments;if( timeout ) clearTimeout( timeout );if( immediate) { // 立即執行let callNow = !timeout;timeout = setTimeout ( () => {timeout = null;}, wait)if ( callNow ) func.apply(self, args);} else {timeout = setTimeout( () => {fn.apply(self, args);}, wait);}} }

節流(throttle): 所謂節流,就是指連續觸發事件,但是在n秒內該事件只處理一次

function throttle(func, wait) {let previous = 0;return function() {let now = Date.now();let self = this;let args = arguments;if (now - previous > wait) {func.apply(context, args);previous = now;}} }

參考 函數防抖和節流

總結

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

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