什么是函數(shù)節(jié)流和函數(shù)防抖？下面本篇文章就來給大家淺談一下函數(shù)節(jié)流和函數(shù)防抖。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對大家有所幫助。

前言

事件的觸發(fā)權(quán)很多時(shí)候都屬于用戶，有些情況下會產(chǎn)生問題：

• 向后臺發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對服務(wù)器造成壓力
• 一些瀏覽器事件:window.onresize、window.mousemove等，觸發(fā)的頻率非常高，會造成瀏覽器性能問題

如果你碰到這些問題，那就需要用到函數(shù)節(jié)流和防抖了。

一、函數(shù)節(jié)流(throttle)

函數(shù)節(jié)流：一個(gè)函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次。
有個(gè)需要頻繁觸發(fā)函數(shù)，出于優(yōu)化性能角度，在規(guī)定時(shí)間內(nèi)，只讓函數(shù)觸發(fā)的第一次生效，后面不生效。

1.如何實(shí)現(xiàn)

其原理是用時(shí)間戳來判斷是否已到回調(diào)該執(zhí)行時(shí)間，記錄上次執(zhí)行的時(shí)間戳，然后每次觸發(fā) scroll 事件執(zhí)行回調(diào)，回調(diào)中判斷當(dāng)前時(shí)間戳距離上次執(zhí)行時(shí)間戳的間隔是否已經(jīng)到達(dá) 規(guī)定時(shí)間段，如果是，則執(zhí)行，并更新上次執(zhí)行的時(shí)間戳，如此循環(huán)；

html,body {height: 500%; // 讓其出現(xiàn)滾動條 } function throttle(fn, delay) {// 記錄上一次函數(shù)觸發(fā)的時(shí)間var lastTime = 0;return function() {// 記錄當(dāng)前函數(shù)觸發(fā)的時(shí)間var nowTime = Date.now();if (nowTime - lastTime > delay) {// 修正this指向問題fn.call(this);// 同步時(shí)間lastTime = nowTime;}} } document.onscroll = throttle(function() {console.log('scroll事件被觸發(fā)了' + Date.now()) } , 200)

上例中用到了閉包的特性--可以使變量lastTime的值長期保存在內(nèi)存中。

2.函數(shù)節(jié)流的應(yīng)用場景

需要間隔一定時(shí)間觸發(fā)回調(diào)來控制函數(shù)調(diào)用頻率：

• DOM 元素的拖拽功能實(shí)現(xiàn)（mousemove）
• 搜索聯(lián)想（keyup）
• 計(jì)算鼠標(biāo)移動的距離（mousemove）
• Canvas 模擬畫板功能（mousemove）
• 射擊游戲的 mousedown/keydown 事件（單位時(shí)間只能發(fā)射一顆子彈）
• 監(jiān)聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 后，只有用戶停止?jié)L動后，才會判斷是否到了頁面底部；如果是 throttle 的話，只要頁面滾動就會間隔一段時(shí)間判斷一次

二、函數(shù)防抖(debounce)

防抖函數(shù)：一個(gè)需要頻繁觸發(fā)的函數(shù)，在規(guī)定時(shí)間內(nèi)，只讓最后一次生效，前面的不生效。

1.如何實(shí)現(xiàn)

其原理就第一次調(diào)用函數(shù)，創(chuàng)建一個(gè)定時(shí)器，在指定的時(shí)間間隔之后運(yùn)行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會清除前一次的定時(shí)器并設(shè)置另一個(gè)。如果前一個(gè)定時(shí)器已經(jīng)執(zhí)行過了，這個(gè)操作就沒有任何意義。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器，然后延遲一定時(shí)間再執(zhí)行。

<button id='btn'>按鈕</button> <script type="text/javascript"> function debounce(fn, delay) {// 記錄上一次的延時(shí)器var timer = null;return function() {// 清除上一次延時(shí)器clearTimeout(timer)timer = setTimeout(function() {fn.apply(this)}, delay)} } document.getElementById('btn').onclick = debounce(function() {console.log('點(diǎn)擊事件被觸發(fā)' + Date.now()) }, 1000) </script>

上例中也用到了閉包的特性--可以使變量timer的值長期保存在內(nèi)存中。

2.函數(shù)防抖的應(yīng)用場景

對于連續(xù)的事件響應(yīng)我們只需要執(zhí)行一次回調(diào)：

• 每次 resize/scroll 觸發(fā)統(tǒng)計(jì)事件
• 文本輸入的驗(yàn)證（連續(xù)輸入文字后發(fā)送 AJAX 請求進(jìn)行驗(yàn)證，驗(yàn)證一次就好）

三、總結(jié)

函數(shù)節(jié)流和函數(shù)去抖的核心其實(shí)就是限制某一個(gè)方法被頻繁觸發(fā)，而一個(gè)方法之所以會被頻繁觸發(fā)，大多數(shù)情況下是因?yàn)?DOM 事件的監(jiān)聽回調(diào)，而這也是函數(shù)節(jié)流以及防抖多數(shù)情況下的應(yīng)用場景。

參考文章

函數(shù)節(jié)流與函數(shù)防抖

JavaScript 函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析

函數(shù)節(jié)流、函數(shù)防抖實(shí)現(xiàn)原理分析

本文轉(zhuǎn)載自： https://segmentfault.com/a/1190000017229182

總結(jié)

以上是生活随笔為你收集整理的ege限制鼠标移动的函数_浅谈函数节流和函数防抖的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。