JavaScript防抖與節(jié)流的實現與注意事項
更新時間：2022年03月31日 10:23:30 作者：_雪菜肉絲面_
防抖和節(jié)流嚴格算起來應該屬于性能優(yōu)化的知識,但實際上遇到的頻率相當高,處理不當或者放任不管就容易引起瀏覽器卡死,下面這篇文章主要給大家介紹了關于JavaScript防抖與節(jié)流的實現與注意事項,需要的朋友可以參考下
概念
防抖：點擊N次提交按鈕，只有最后一次會發(fā)出請求。減少無效請求的次數。
節(jié)流：每點擊一次按鈕，都會失效一段時間。降低觸發(fā)的頻率。
實現
/*
防抖
時限內，只有最后一次調用會執(zhí)行
*/
function debounce(func, interval = 0) {
let timer;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func()
}, interval)
}
}
/*
節(jié)流
執(zhí)行之后會失效一段時間
*/
function throttle(fn, interval=0, immediate=true) {
let valid = true
return function () {
if (!valid) {
return
}
valid = false
if (immediate) {
fn()
setTimeout(() => {
valid = true;
}, interval)
} else {
setTimeout(() => {
fn()
valid = true;
}, interval)
}
}
}測試
function say() {
console.log(1)
}
var a = debounce(say, 1000)
var b = throttle(say, 1000)
var c = throttle(say, 1000, false)
<button onclick="a()">測試防抖</button>
<button onclick="b()">測試節(jié)流一</button>
<button onclick="c()">測試節(jié)流二</button>
效果：
防抖。
節(jié)流，立即執(zhí)行。
節(jié)流，延時執(zhí)行。
注意事項
原理：閉包。每調用一次都會對應一個閉包。
不能夠像下面這樣寫：
<button onclick="debounce(say, 1000)()">測試防抖</button> <button onclick="throttle(say, 1000)()">測試節(jié)流一</button> <button onclick="throttle(say, 1000, false)()">測試節(jié)流二</button>
不然：
總結
到此這篇關于JavaScript防抖與節(jié)流的實現與注意事項的文章就介紹到這了,更多相關JS防抖與節(jié)流內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JQuery有很多這樣的插件，但本文的這個是跟著自己的想法寫的，也不知道他人是如何實現的，感興趣的朋友可以了解下2014-01-01
Ajax，UTF-8還是GB2312 eval 還是execScript
討厭的東西。 關于Ajax獲取HTML內容編碼，與JavaScript載入腳本的動態(tài)執(zhí)行問題。2008-11-11
很多時候我們需要用圖表來制作我們統(tǒng)計的數據直觀的分析,所以我們可以用Echarts來制作圖表,這篇文章主要給大家介紹了關于Echats圖表大屏自適應的實現方法,需要的朋友可以參考下2021-10-10
Firefox和Opera對PNG的支持非常的好，都是IE卻無視PNG圖片這一特性的“存在”，雖然IE7已經支持都是IE6還是不行。2009-09-09
微信小程序web-view無法打開該頁面不支持打開的解決方法
小程序現在日漸成熟,功能也越來越強大,我們今天來一起看看小程序跳轉的問題,下面這篇文章主要給大家介紹了關于微信小程序web-view無法打開該頁面不支持打開的解決方法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了JavaScript中神奇的call()方法,本文用淺顯的語言幫助你加深理解call()方法,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript 正則表達式語法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
關于document.cookie的使用javascript
設置cookie 每個cookie都是一個名/值對，可以把下面這樣一個字符串賦值給document.cookie：2008-04-04
我們知道，默認情況下，對一個函數前面使用new，可以構造出一個對象。每一個對象都有一個constructor屬性，這個constructor屬性指向構造出該對象的函數。2010-01-01