函数节流
一个函数执行一次后,只有大于设定的执行周期才会执行第二次。
function throttle(func, ms = 1000) {
//标记是否可以执行
let canRun = true;
return function (...args) {
//不可执行
if (!canRun) return;
//执行后设置不可执行
canRun = false;
//设置执行周期
setTimeout(() => {
func.apply(this, args);
//重置标记
canRun = true;
}, ms);
}
}
测试 :
const task = () => {
console.log('run task') };
const throttleTask = throttle(task, 1000);
//鼠标连续点击,在设置的执行周期内只会触发一次
window.addEventListener('click', throttleTask);
应用:
- 滚动加载,加载更多或滚动到底部监听
- 搜索框,搜索联想功能
- 高频点击提交,表单重复提交
函数防抖
一个需要频繁触发的函数 在规定事件内 只让最后一次生效 前面的不生效
function debounce(func, ms = 1000) {
//定时器ID
let timer;
return function (...args) {
//清除定时器
if (timer) {
clearTimeout(timer);
}
//设置函数执行时间
timer = setTimeout(() => {
func.apply(this, args);
}, ms);
}
}
测试 :
const task = () => {
console.log('run task') };
const debounceTask = debounce(task, 1000);
//鼠标连续点击,只会触发最后一次
window.addEventListener('click', debounceTask);
应用 :
- 手机号、邮箱正则输入检测
- 搜索框输入:用户最后一次输入完,再发送请求
- 窗口大小:窗口调整完成后,计算窗口大小,防止重复渲染