函数防抖
代码如下:
// 设置一个默认值 300ms
const oCount2 = document.getElementById('count2');
const oIpt2 = document.getElementById('ipt2');
// 设置一个默认值 300ms
const debounce = (fn, wait = 300) => {
let time = null
return function(arguments) {
const _this = this, args = arguments
clearTimeout(time)
time = setTimeout(() => {
fn.apply(_this, [args])
// fn.call(_this, args) //或者使用这个
}, wait)
}
}
let init2 = 0
oIpt2.onkeyup = debounce(function() {
oCount2.innerText = ++init2
}, 500) //可以自己定义延迟时间间隔
效果:
可以看到,加了防抖函数之后,当我们在频繁输入的时候,函数并没有执行, 只有在函数指定的间隔内(500ms)不再输入了,才会执行函数。如果在时间间隔之内继续输入,会触发函数重新计数。
函数防抖的概念:在事件触发后的n秒之后,再去执行真正需要执行的函数,如果在这n秒之内事件又被触发,则重新开始计时。
函数截流
代码如下:
const oCount3 = document.getElementById('count3');
const oIpt3 = document.getElementById('ipt3');
const oTime = document.getElementById('time');
const throttle = (fn, threshhold = 1000) => {
let last, deferTimer
return function(arguments) {
const _this = this, args = arguments
let now = +new Date()
if(last && now < last + threshhold) {
clearTimeout(deferTimer)
deferTimer = setTimeout(function () {
last = now
fn.call(_this, args)
}, threshhold)
} else {
last = now
fn.call(_this, args)
}
}
}
let init3 = 0
const throttleIpt = throttle(function() {
let time = new Date().getMinutes() + ':' + new Date().getSeconds()
oTime.innerText = time
oCount3.innerText = ++init3
}, 1000) // 初始化一下
oIpt3.onkeyup = function() {
throttleIpt()
}
效果:
可以看到,任由我们怎么输入,函数会按照我们设定的时间(1s),每秒执行一次。你可以设置更大。
函数截流的概念:规定好一个单位时间,触发函数一次。如果在这个单位时间内触发多次函数的话,只有一次是可被执行的。想执行多次的话,只能等到下一个周期里。