console
function debounce(fn, wait, imme = false) {
let timer
return function () {
let context = this
let args = arguments
if (timer) clearTimeout(timer)
if (imme) {
callNow = !timer
timer = setTimeout(() => {
timer = null
}, wait)
if (callNow) fn.apply(context, args)
} else {
timer = setTimeout(() => {
fn.apply(context, args)
}, wait)
}
}
}
function throttle(fn, wait, type = 1) {
if (type === 1) {
var timer = null
} else {
var prev = 0
}
return function () {
let context = this
let args = arguments
if (type === 1) {
if (!timer) {
timer = setTimeout(() => {
timer = null
fn.apply(context, args)
}, wait)
}
} else {
let now = Date.now();
if (now - prev > wait) {
fn.apply(context, args);
prev = now;
}
}
}
}
let i = 0
let j = 0
const debounceDiv = document.querySelector('#debounceDiv')
debounceDiv.addEventListener('mousemove', debounce(function (ev) {
this.innerHTML = i++
}, 1000, false))
const throttleDiv = document.querySelector('#throttleDiv')
throttleDiv.addEventListener('mousemove', throttle(function (ev) {
this.innerHTML = j++
}, 1000, 1))
<div class="debounce text" id="debounceDiv"></div>
<div class="throttle text" id="throttleDiv"></div>
.debounce {
width: 200px;
height: 200px;
background: red;
}
.throttle {
margin-top: 20px;
width: 200px;
height: 200px;
background: yellowgreen;
}
.text {
text-align: center;
color: #fff;
font-size: 40px;
line-height: 200px;
font-weight: bolder;
}