[笔记]节流(throttle)与防抖(debounce)

场景

用户频繁操作DOM导致浏览器崩溃

比如

• 频繁使用点击事件
• 频繁使用(ajax,axios)访问
• input框输入一个字就输出一次
  

解决方法

使用lodash.js throttle和debounce俩个方法
官方文档 Lodash

例子

防抖: 前面的所有触发都被取消，最后一次在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次

	const inp = document.querySelector('input')
    inp.addEventListener('input',_.debounce(function() {
    //输入完 等1秒才会执行
    console.log('正在访问xxxxxxx');
  },1000))

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会回调，把频繁触发变为少量触发

	const inp = document.querySelector('input')
    inp.addEventListener('input',_.throttle(function() {
    //输入一此等待2秒执行一次
    console.log('正在访问xxxxxxx');
  },2000))