本篇文章参考了以下两处优秀的链接,并以自己更容易理解的方式综合了两处的代码
JavaScript专题之跟着underscore学防抖
JavaScript中的定时控制-Throttle、Debounce、Immediate的基本概念
直接上代码:
html:无修改
<!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>
#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>
debounce.js:
"use strict"
var count = 1;
var container = document.getElementById('container');
function getUserAction() {
container.innerHTML = count++;
};
function debounce(func, wait, immediate) {
// func: 要debounce的函数
// wait:等待的事件
// immediate:是否是immediate,即立即执行后再防抖
var timeout; //setTimeout事件ID
var safe = true; //是否是首次,能否立即执行
var result; // func返回的结果
return function() {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) { //立即执行
if (safe) { //首次立即触发,并关闭可触发状态
result = func.apply(context, args);
safe = false;
}
timeout = setTimeout(function(){
safe = true; //wait时间后开启可触发状态。若一直抖动,则一直不是可触发状态
}, wait)
}
else { //不立即执行
timeout = setTimeout(function(){
func.apply(context, args) //wait时间后执行,若一直抖动,则一直不执行
}, wait);
}
return result
}
}
container.onmousemove = debounce(getUserAction, 1000, false);