函数节流
一个函数执行一次后，只有大于设定的执行周期才会执行第二次。
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);
应用 :
- 手机号、邮箱正则输入检测
- 搜索框输入：用户最后一次输入完，再发送请求
- 窗口大小：窗口调整完成后，计算窗口大小，防止重复渲染
