JavaScript的防抖和節(jié)流案例
更新時(shí)間：2021年06月25日 11:09:38 作者：zhi698999y
這篇文章介紹了JavaScript的防抖和節(jié)流案例的代碼實(shí)現(xiàn)和概念.包含詳細(xì)的代碼,希望對你有所幫助
防抖：在一定的時(shí)間內(nèi)只執(zhí)行最后一次任務(wù)；
節(jié)流：一定的時(shí)間內(nèi)只執(zhí)行一次；
防抖
<button id="debounce">點(diǎn)我防抖！</button>
$('#debounce').on('click', debounce());
function debounce() {
let timer;
// 閉包
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
// 需要防抖的操作...
console.log("防抖成功！");
}, 500);
}
}
節(jié)流：
<button id="throttle">點(diǎn)我節(jié)流！</button>
$('#throttle').on('click', throttle());
function throttle(fn) {
let flag = true;
// 閉包
return function () {
if (!flag) {
return;
}
flag = false;
setTimeout(() => {
console.log("節(jié)流成功！");
flag = true;
}, 1000);
};
}
到此這篇關(guān)于JavaScript的防抖和節(jié)流案例的文章就介紹到這了,更多相關(guān)JavaScript防抖和節(jié)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
bind()方法主要就是將函數(shù)綁定到某個(gè)對象，bind()會創(chuàng)建一個(gè)函數(shù)，函數(shù)體內(nèi)的this對象的值會被綁定到傳入bind()第一個(gè)參數(shù)的值，當(dāng)然這是綁定哦，不是像call、apply一樣直接執(zhí)行，apply要執(zhí)行的話還得自己調(diào)用2022-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)表單驗(yàn)證源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
基于JavaScript FileReader上傳圖片顯示本地鏈接
這篇文章主要為大家詳細(xì)介紹了基于JavaScript FileReader上傳圖片顯示本地鏈接的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片
關(guān)于javascript隨機(jī)數(shù)的，很早以前的文章了，不過內(nèi)容還是不錯(cuò)的，如果想要更多的效果，可以去腳本之家搜下。2009-12-12
這篇文章主要介紹了js獲取會話框prompt的返回值的方法,通過一個(gè)簡單的密碼判斷實(shí)例分析了js獲取會話框prompt返回值的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
javascript實(shí)現(xiàn)點(diǎn)擊小圖顯示大圖
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊小圖顯示大圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript獲取flash對象與網(wǎng)上的有所不同
關(guān)于js獲取flash對象，網(wǎng)上有非常多的例子，但不是我想要的，經(jīng)測試整理，因此本文誕生了2014-04-04
javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
在平時(shí)編碼中，經(jīng)常要做拼接字符串的工作，如把json數(shù)據(jù)用HTML展示出來，以往字符串拼接與邏輯混在在一起會讓代碼晦澀不堪，加大了多人協(xié)作與維護(hù)的成本。而采用前端模板機(jī)制就能很好的解決這個(gè)問題2011-10-10
淺談typescript中keyof與typeof操作符用法
本文主要介紹了typescript中keyof與typeof操作符用法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章為大家整理了13個(gè)PHP函數(shù)超實(shí)用，函數(shù)是PHP如此強(qiáng)大的源泉，但是很多PHP函數(shù)并沒有得到充分的利用，本文的13個(gè)PHP函數(shù)大家一定要真正掌握。2015-10-10