函数节流
当某一事件在持续发生时,我们希望在一定时间内才会触发一次函数,假如说某商城中 商品抢购,使用脚本去执行抢购他会一直去请求后端从而返回结果给我们。这样会大大的增加后端的请求数量，并有可能导致浏览器崩溃，从而我们使用节流方式 当到达了时间点才让他执行一次。举个栗子：
<div id="count">0</div>
<button id="btn">click</button>
<script>
var oDiv = document.getElementById('count');
var oBtn = document.getElementById('btn');
oBtn.onclick = throttle(click, true,2000);
const throttle = function (fn, immediate = false, interval = 500) {
let timer = null
return function () {
if (immediate) {
fn.apply(this, arguments)
immediate = false
}
if (!timer) {
timer = setTimeout(() => {
clearTimeout(timer)
timer = null
fn.apply(this, arguments)
}, interval)
}
}
}
function click() {
//模拟后端请求
oDiv.innerText = parseInt(oDiv.innerText) + 1;
}
</script>
每单击按钮都会使div的数量加1并且隔两秒才有效
防抖
在一段时间内的连续函数调用,只让其执行一次
<input type="text" id="input">
<script>
var oInput = document.getElementById('input');
oInput.oninput = debounce(change, 1000);
function change(e) {
console.log(e, this.value);
}
/**
* fun 回调方法
* wait 每次在范围内执行一次的时间
* immediat 是否立即执行
*/
function debounce(fun, wait, immediat) {
return function() {
if (this.timerId) {
clearInterval(this.timerId);
}
if (immediat) {
//立即执行
let callNow = !this.timerId;
this.timerId = setTimeout(_ => {
fun.apply(this, arguments);
}, wait)
if (callNow) fun.apply(this, arguments);
} else {
//非立即执行
this.timerId = setTimeout(_ => {
fun.apply(this, arguments);
}, wait)
}
}
}
</script>
