- 防抖函数:用于控制函数的执行频率,n秒后再执行,一定时间内,只执行最后触发一次,若n秒内重复触发,则重新计时。
- 应用场景: 输入框输入事件、按钮点击事件、浏览器窗口大小调整事件等,手机号,邮箱等输入验证码
- 代码
function debounce(func, delay) {//定时器idlet timerId;return function (...args) {if (timerId) {clearTimeout(timerId);}timerId = setTimeout(() => {func.apply(this, args);}, delay);};}
- 节流函数,限制函数的执行频率,一段时间内,触发多次,只执行一次
- 应用场景,页面滚动,按钮高频点击,游戏技能冷却,搜索框,鼠标移动
- 代码
function throttle(func, wait) {let lastTime = 0;return function () {const now = new Date().getTime();if (now - lastTime > wait) {fn.apply(this, arguments);lastTime = now;}};}
- 区别:防抖:n秒内,若是重复触发,则重新计时;节流:n秒内,多次触发,只执行一次
- 调用,如下
//定义回调函数
function inputChange() {console.log("输入值变化");}//定义输入事件调用函数const debounceInput = debounce(inputChange, 2000);//模拟输入事件setInterval(debounceInput, 1000);
在vue里面使用,参考以下文章
https://blog.csdn.net/HDdgut/article/details/141157245