```javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="qq">防抖</button>
<div id="input">1</div>
<button id='show'>节流</button>
<div id="box">0</div>
</body>
<script>
var qq = document.getElementById('qq');
var input = document.getElementById('input');
qq.onclick = hanlde(ss, 1000);
//防抖
//在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时
//第一次点击,直接开始定时,timeout不再为空
//第二次点击,此时time的变成定时器,但是会进入if,清空掉定时器,进行赋值
//所以就重新开始定时
//当不再点击后,定时器内的函数就执行了
//如果是在wait时间内,if 会进不去,所以每次点击都是 当前时间减去上次点击时间
//最后当时间>wait时,就会执行
function hanlde(buy, time) {
var timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);
timeout = setTimeout(buy, time);
}
};
function ss() {
input.innerHTML = Number(input.innerHTML) + 1
}
// //防抖立即执行
// function hanlde(buy, time) {
// var timeout = null;
// var flag=true;
// return function () {
// if(flag==true){
// buy()
// flag=false
// }
// if (timeout) clearTimeout(timeout);
// timeout = setTimeout(buy, time);
// }
// };
// function ss() {
// input.innerHTML = Number(input.innerHTML) + 1
// }
//节流
// 规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
let oBtn = document.getElementById('show');
let oBox = document.getElementById('box');
// 第一次点击,获取当前时间,当前时间会减去0,会大于值,所以肯定执行
// 第二次点击,此时time的值为上一次点击的值,这时当前的时间减去上次的时间,
// 如果是在wait时间内,if 会进不去,所以每次点击都是当前时间减去上次点击时间
// 最后当时间>wait时,就会执行
function debounce(handle, wait) {
let time = 0;
return function () {
var newdate = new Date().getTime();
if (newdate - time > wait) {
handle();
time = newdate
}
}
}
function buy() {
oBox.innerText = parseInt(oBox.innerText) + 1
}
oBtn.onclick = debounce(buy, 1000)
</script>
</html>