console
function debounce1(func, wait) {
let timer;
return function() {
const context = this;
const args = arguments;
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(context, args);
}, wait);
}
}
function debounce2(func, wait) {
let timer;
return function() {
const context = this;
const args = arguments;
let callNow = !timer;
timer = setTimeout(()=>{
timer = null;
}, wait);
if (callNow) {
func.apply(context, args);
}
}
}
function debounceNormal() {
return debounce1(function(info) {
console.log("非立即执行debounce");
}, 1000);
}
function debounceImmediate() {
return debounce2(function() {
console.log("立即执行debounce");
}, 1000)
}
function throttle1() {
}
function throttle2() {
}
<button class="btn" onclick="debounceNormal()">debounce非立即执行</div>
<button class="btn" onclick="debounceImmediate()">debounce立即执行</div>
<button class="btn" onclick="throttleDemo1()">throttle 定时器</div>
<button class="btn" onclick="throttleDemo2()">throttle 时间戳</div>
.btn {
display: block;
margin-top: 10px;
width: 200px;
height: 44px;
background: yellowgreen;
outline: none;
border: none;
border-radius: 6px;
color: aliceblue;
line-height: 44px;
text-align: center;
}