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