本篇文章參考了以下兩處優秀的鏈接，並以自己更容易理解的方式綜合了兩處的代碼
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);