let run = true;
return function () {
if (!run) return;
run = false;
setTimeout(() => {
fn.apply(this, arguments);
run = true;
}, interval);
};
}
用处：减少代码执行频率✅
函数防抖
当你加了函数防抖之后：
window.addEventListener("scroll", debounce(() => console.log("滚动结束！")));效果如下：
debounce源码：
function debounce(fn, interval = 500) {
let timeout = null; return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, interval);
};
}
用处：判断某个
动作结束，如刚刚的滚动结束、input输入结束等✅解决IOS设备局部滚动不顺畅(粘手)
除了浏览器原生滚动，
自定义的滚动条都会出现这种情况，加以下属性就可以解决：
.box {
-webkit-overflow-scrolling: touch;
}对比如下：
注意：要真机才能看到效果，这里指的
局部滚动是指
自己定义的盒子，然后设置
overflow: auto || scroll;后的滚动行为；滚动传播
指有多个
滚动区域，当一个
滚动区域滚动完之后，继续滚动会
传播到到父区域继续滚动的行为：
.box {
overscroll-behavior: contain; // 阻止滚动传播
}对比效果图如下：
横向滚动
移动端遇到此需求比较多，常用于图片展示：
