JavaScript防抖案例講解
更新時間：2021年08月13日 10:50:36 作者：angus.dai
這篇文章主要介紹了JavaScript防抖案例講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
原理
防抖的原理是：你盡管觸發(fā)事件，但是我一定要在事件觸發(fā)n秒之后才執(zhí)行，如果你在一個事件觸發(fā)的n秒內(nèi)又觸發(fā)了這個事件，那我就以新的事件的時間為準(zhǔn)，n秒后再執(zhí)行?？傊褪且鹊侥阌|發(fā)完事件n秒內(nèi)不再觸發(fā)事件，我才執(zhí)行。
案例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>debounce</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
background-color: #444;
font-size: 30px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="debounce.js"></script>
</body>
</html>
function getUserAction(e) {
console.log(this);
console.log(e);
container.innerHTML = count++;
};
function debounce(func, wait) {
var timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, arguments); // 解決this和事件對象event
}, wait);
}
}
container.onmousemove = debounce(getUserAction, 1000);
到此這篇關(guān)于JavaScript防抖案例講解的文章就介紹到這了,更多相關(guān)JavaScript防抖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用webpack和rollup打包組件庫的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了原生JS實現(xiàn)的跳一跳小游戲,結(jié)合完整實例形式分析了javascript實現(xiàn)跳一跳游戲的原理、實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
推薦三款不錯的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)
這篇文章主要為大家詳細介紹了三款不錯的圖片壓縮上傳插件，webuploader、移動端上傳插件localResizeIMG4以及LUploader)2017-04-04
這篇文章介紹了JS實現(xiàn)遮罩層效果的簡單實例，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JavaScript中對于SPA單頁面的理解，單頁應(yīng)用SPA是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型，它通過動態(tài)重寫當(dāng)前頁面來與用戶交互2023-02-02
uniapp存儲數(shù)據(jù)到本地文件及讀取本地文件數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于uniapp存儲數(shù)據(jù)到本地文件及讀取本地文件數(shù)據(jù)的相關(guān)資料,在開發(fā)uniapp應(yīng)用時,我們常常需要使用本地存儲來保存一些數(shù)據(jù),比如用戶登錄信息、設(shè)置項等,本文通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
最近寫一個功能，需要用到點擊空白層就讓指定的一個層消失，這里簡單介紹下實現(xiàn)方法，需要的朋友可以參考下2007-05-05
這篇文章主要給大家介紹了微信小程序最近新增的拖動組件movable-view的簡單使用教程，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
談?wù)勎覍avaScript中typeof和instanceof的深入理解
這次主要說說javascript的類型判斷函數(shù)typeof和判斷構(gòu)造函數(shù)原型instanceof的用法和注意的地方，對本文感興趣的朋友一起看看吧2015-12-12
優(yōu)化 JavaScript 代碼的方法小結(jié)
客戶端腳本能讓你的應(yīng)用更加地動態(tài)和活躍， 但是瀏覽器對代碼的解析可能造成效率問題， 而這種性能差異在客戶端之間也不盡相同。 這里我們討論和給出一些優(yōu)化你的 JavaScript 代碼的提示和最佳實踐。2009-07-07