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)文章
JavaScript中函數(shù)(Function)的apply與call理解
這篇文章主要介紹了JavaScript中函數(shù)(Function)的apply與call理解,本文講解了JavaScript函數(shù)調(diào)用分為4中模式以及通過apply和call實現(xiàn)擴展和繼承兩方面,需要的朋友可以參考下2015-07-07jQuery實現(xiàn)為控件添加水印文字效果(附源碼)
這篇文章主要介紹了jQuery實現(xiàn)為控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源碼供讀者下載參考,需要的朋友可以參考下2015-12-12