嗯,下面这些是我个人理解
防抖
- 第一步先 写个p
p{这是第$个}*100
- 写个函数
function technique(callback,time=200){
let e = null
return function (){
clearTimeout(e)
e = setTimeout(() => {
callback.call(e)
}, time);
}
}
- 调用
window.onscroll = technique(function(){
console.log("滚动页面");
},300)
简单说,如果在指定事件之内重复调用多次函数,那么就把之前函数清除不执行。只会执行一次函数,
触发最多的函数就是滚动事件了,页面稍微滚动就会多次触发。可是我们不需要这么多次调用,这是不是太浪费了,那么就可以利用setTimeout来减少调用次数
节流
- 第一步还是先 写个p
p{这是第$个}*100
- 写个函数
function throttle(callback,time=200) {
var lastTime = new Date().getTime()
return function (){
var now = new Date().getTime()
if (now - lastTime >= time) {
lastTime = now
callback()
}
}
}
- 调用
window.onscroll = throttle(function(){
console.log("滚动页面");
},300)
以上只是简单实现,还没有考虑到调用函数参数传递
还有以上只是个人理解,也可以-》看这里