JavaScript的防抖和節(jié)流案例
更新時間：2021年06月25日 11:09:38 作者：zhi698999y
這篇文章介紹了JavaScript的防抖和節(jié)流案例的代碼實現(xiàn)和概念.包含詳細的代碼,希望對你有所幫助
防抖：在一定的時間內只執(zhí)行最后一次任務；
節(jié)流：一定的時間內只執(zhí)行一次；
防抖
<button id="debounce">點我防抖！</button>
$('#debounce').on('click', debounce());
function debounce() {
let timer;
// 閉包
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
// 需要防抖的操作...
console.log("防抖成功！");
}, 500);
}
}
節(jié)流：
<button id="throttle">點我節(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);
};
}
到此這篇關于JavaScript的防抖和節(jié)流案例的文章就介紹到這了,更多相關JavaScript防抖和節(jié)流內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了JavaScript的閉包及應用。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
javascript實現(xiàn)動態(tài)CSS換膚技術的腳本
javascript實現(xiàn)動態(tài)CSS換膚技術的腳本...2007-06-06
JavaScript之排序函數(shù)_動力節(jié)點Java學院整理
排序也是在程序中經(jīng)常用到的算法。這篇文章主要介紹了JavaScript之排序函數(shù)，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了js實現(xiàn)DOM走馬燈特效的方法,以實例形式較為詳細的分析了走馬燈效果的實現(xiàn)原理與具體步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄猨avascript幀動畫(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了在TypeScript項目中進行BDD測試，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
js利用for in循環(huán)獲取 一個對象的所有屬性以及值的實例
下面小編就為大家?guī)硪黄猨s利用for in循環(huán)獲取 一個對象的所有屬性以及值的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
本文主要分享了js實現(xiàn)彈窗暗層效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了使用js獲取身份證年齡的示例代碼，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家介紹了微信小程序配置視圖層數(shù)據(jù)綁定相關示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪<BR>2022-04-04