JavaScript防抖案例講解
阿新 • • 發佈：2021-08-16
原理
防抖的原理是：你儘管觸發事件，但是我一定要在事件觸發n秒之後才執行，如果你在一個事件觸發的n秒內又觸發了這個事件，那我就以新的事件的時間為準，n秒後再執行。總之，就是要等到你觸發完事件n秒內不再觸發事件，我才執行。
案例
<!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
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);
到此這篇關於防抖案例講解的文章就介紹到這了,更多相關Script防抖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！