就是指 在设定的一段时间内中除了最后一次,前面的连续触发都不执行。
举例:设定1000毫秒执行,触发一次,1000毫秒后执行,但是如果你在剩500毫秒的时候又触发了,那就重新从1000毫秒计算。
形象举例:英雄联盟或者王者荣耀的回城
示例:非立即执行版
<button class="ipt" type="button" onkeyup="SomeJavaScriptCode">防抖</button>
<script>
let timerId = null
document.querySelector('.ipt').onclick = function () {
console.log('我被点了');
if (timerId !== null) {
clearTimeout(timerId)
}
timerId = setTimeout(() => {
console.log('我是防抖');
}, 1000)
}
</script>
立即执行版
<button class="ipt" type="button" onkeyup="SomeJavaScriptCode">防抖</button>
<script>
let timerId = null
let flag = true
document.querySelector('.ipt').onclick = function () {
console.log('被点了');
clearTimeout(timerId)
if (flag) {
console.log('我是防抖');
flag = false
}
timerId = setTimeout(() => {
flag = true
}, 1000)
}
</script>
就是指在设定的一段时间内连续触发事件也只执行一次。
举例:设定1000毫秒执行,在1000毫秒内触发多次,也是在1000毫秒后执行一次
形象举例:技能CD,等cd过后再点技能才能生效
示例:非立即执行版
<button class="ipt" type="button" onkeyup="SomeJavaScriptCode">节流</button>
<script>
let timerId = null
document.querySelector('.ipt').onclick= function () {
console.log('我被点了');
if (timerId !== null) {
return
}
timerId = setTimeout(() => {
console.log('我是节流');
timerId = null
}, 1000)
}
</script>
<button class="ipt" type="button" onkeyup="SomeJavaScriptCode">节流</button>
<script>
let timerId = null
let flag = true
document.querySelector('.ipt2').onclick = function () {
if (flag) {
console.log("我是节流");
flag=false
timerId = setTimeout(() => {
flag = true
}, 1000)
}
console.log('我被点了');
}
</script>
一般用lodash库,利用里面的debounce和throttle