【前端开发】防抖和节流

我不是一个前端开发程序员。之前有一个需求是用native代码来写一个ui程序。其中包括一个需求是：音量条。

音量条能够手动拖动来设置音量。也需要监听系统音量的变化，来改变 ui。一段时间后出现了一个bug，音量条在手动拖动一次后，会发生鬼畜的抖动。

分析后发现，是音量条会触发高频的音量变化事件，也就会高频的改变系统音量，然后系统数据库会高频的通知所有监听系统音量变化的应用。

问题在于高频之后，系统数据库的监听循环机制没有那么快。会导致音量改变事件在数据库监听机制这一层积压。最重会延后爆发，导致了音量的抖动。

处理机制很简单：加一个定时器降低设置频率即可。于是手动实现了类似的功能。我把它这种方式叫做：基于定时器的高频滤波机制。

最近才知道，这种操作在前端很常见，叫：防抖。主要应用在：事件发生频繁，但处理起来比较耗时的时候。例如上面的场景，以及监听鼠标的滚动事件、鼠标的位置改变事件等。
其处理办法就是：加一个定时器，在定时器到期之前再触发该事件时，取消上一个定时器，新建一个定时器。这个操作比较快，处理起来不会耗时。

可以使用如下函数来把事件处理函数封装成防抖函数

function debounce(func) {
	let time = null
	return () => {
	    clearTimeout(time)
	    time = setTimeout(() => {
	        func()
	    }, 500)
	}
}

还有一个类似的概念，叫做节流，主要应用在：防止用户高频触发某事件时。目的是让用户在一段时间内只能触发一次。

使用如下函数来把事件处理函数封装成节流函数

function throttle(fn) {
	let canRun = true;
	return function () {
	  if (!canRun) return;
	  canRun = false; 
	  setTimeout(() => {
	    fn();
	    canRun = true;
	  }, 500);
};