防抖和节流

可视化在线demo
滚动栏在线demo

学习链接1
学习链接2

概念

防抖：（停止后才1次）触发事件后n秒内只执行1次，如果n秒内又触发了事件，则会重新计算时间。
节流：（几秒1次）一定时间内只能执行1次。

应用场景

防抖：

• 搜索框搜索输入，只有用户停止输入时，才发送请求；
• 手机号、邮箱号验证输入检测；
• 窗口resize，只需等窗口调整完成后计算大小，防止重复渲染。

节流：

• 表单验证时重复点击提交按钮；
• 滚动加载；
• 浏览器搜索框联想功能。

实现原理

1、防抖

正常情况下，我希望它多久执行，假设邮箱验证正常情况是每隔1秒向后台发送请求，然后用户一直不停的在输入框输入，此时会不断的清除Timeout，直到停止调用方法1秒后才正常去向后台发送请求。

// 防抖【防止多次触发滚动事件】
var time = '';
handleDebounce () {
    console.log('调用')
    // 清除未执行的代码，重置回初始化状态
    if(timer){clearTimeout(timer);} 
    //开始一个新的任务
    timer = setTimeout(()=>{
        console.log('函数防抖');
    }, 1000);
},

image.png

2、节流

假设浏览器一直在不停滚动，我不可能等停止了再请求，也不可能一直请求。

var flag = false;
handleThrottle () {
  console.log('调用')
  if(!flag){return}
  flag = false;
  setTimeout(()=>{
    console.log('函数节流');
    flag = true;
  },1000)
}

image.png