js中节流和防抖
1.含义
节流:一个事件可以连续多次触发,一定时间段内,让该事件处理函数只会执行一次的方法就叫节流
防抖:持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次
2.个人理解:
节流很好理解就是节约内存,让事件不能连续无间断的触发.
尽量不影响用户体验又能减少事件触发的次数
防抖:举个例子,玩游戏挂机的判定就是防抖,你一段时间没有操作就会触发挂机事件,你只要动一动就不会触发这个事件。
3.实现方法
//防抖
var input = document.querySelector("input")//获得标签
var t = null //定时器
input.oninput = function () { //表单的oninput事件
if (t != null) {
clearTimeout(t)
}
t = setTimeout(() => { console.log(this.value) }, 500)
}
//节流` ,懂其一即可
方法一
var flg = true
onscroll = function () {
if (flg) {
console.log("sdsdsd");
setTimeout(() => {
flg = true
}, 500)
}
flg = false
}
方法二
window.addEventListener("scroll", jlf(
function () {
console.log("ssss")
}, 500))
function jlf(fn, yc) { //节流函数
time = new Date()
return () => {
if (time - new Date() + yc < 0) {
fn()
time = Date.now()
}
}
}
个人理解,有异议以官方为标准