JavaScript防抖案例講解
更新時間：2021年08月13日 10:50:36 作者：angus.dai
這篇文章主要介紹了JavaScript防抖案例講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(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)文章
這篇文章主要介紹了淺談目前可以使用ES10的5個新特性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
其實為js文件傳參是很久就接觸過的一個問題，只是一直沒有放在心上，今天在無憂看到又有人問這個問題，今日總結(jié)一下。2010-05-05
JavaScript中函數(shù)（Function）的apply與call理解
這篇文章主要介紹了JavaScript中函數(shù)（Function）的apply與call理解,本文講解了JavaScript函數(shù)調(diào)用分為4中模式以及通過apply和call實現(xiàn)擴展和繼承兩方面,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JS倒計時兩種實現(xiàn)方式代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
jQuery實現(xiàn)為控件添加水印文字效果(附源碼)
這篇文章主要介紹了jQuery實現(xiàn)為控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript拖拽、碰撞、重力及彈性運動實現(xiàn)方法,涉及JavaScript數(shù)學(xué)運算結(jié)合時間函數(shù)實現(xiàn)運動效果的相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS原型和繼承，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在?JavaScript?中，reduce?是最難理解的數(shù)組方法之一，它是一個強大而靈活的高階函數(shù)，下面就來看看?reduce?的妙用之處，希望對大家有所幫助2023-02-02
Bootstrap 粘頁腳，說得具體一點就是“將固定高度的頁腳緊貼頁面底部”，本文給大家分享具有實現(xiàn)代碼，感興趣的朋友參考下吧2016-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)翻牌抽獎動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09