函数节流与函数防抖

函数防抖和函数节流

在某些时候，某些事件会频繁的触发，影响性能，所以需要防抖操作来进行性能优化。
比如用户在输入框中输入内容而输入框会给出相关内容，此时如果监听input的内容变化则会多次触发对应事件，而这些事件是我们不希望触发的。我们希望当input框的内容改变并且一定时间内不再改变时，才将相关内容渲染在页面上。
此时就可以用到函数防抖和函数节流。

一、函数防抖
函数防抖重点在于有足够的时间间隔才触发某个回调。
实现方法的核心在于延时器的注销和重新注册。
函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function debounce (func, delay) {
	let timer = null
	return function (...ars) {
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(() => {
				func.apply(this, args)
		}, delay)
	}
}

应用场景

1.搜索联想
2.window触发resize

二、函数节流
函数节流的重点在于在一定的时间内只触发一次回调。
实现方法的核心在于一旦有延时器就直接返回。

函数节流

规定在一个单位时间内，只能触发一次函数。

function throttle(func, wait) {
        let timer
      
        return function(...args) {
          if (timer) {
            return
          }
      
          timer = setTimeout(() => {
            func.apply(this, args)
            timer = null
          }, wait)
        };
      };

应用场景

1.上拉加载更多
2.鼠标的点击事件，防止双击