前言
在前端开发中，我们经常会遇到一些需要频繁触发的事件，比如窗口大小改变、滚动事件等。这些事件会频繁触发，导致页面性能下降，甚至会造成页面卡顿等问题。因此，我们需要一些方法来优化这些事件的触发。
常见的优化方法有防抖和节流。本文将介绍如何使用 ES6 和 ES8 实现防抖和节流，并且兼容 IE 浏览器。
防抖
防抖的原理是在一定时间内，如果同一个事件多次触发，只执行最后一次。这个时间就是防抖时间。如果在这个时间内再次触发，就会重新计时。这样可以避免事件频繁触发，提高性能。
ES6 实现
ES6 中可以使用箭头函数和 setTimeout 来实现防抖。
-- -------------------- ---- -------
-------- ------------ ------ -
--- ----- - -----
------ ---------- -
----- ------- - -----
----- ---- - ----------
--------------------
----- - ------------- -- -
----------------- ------
-- -------
--
-上面的代码中，debounce 函数接受两个参数，分别是需要执行的函数和防抖时间。在函数内部，我们定义了一个 timer 变量来保存定时器的 ID。每次执行函数时，首先清除之前的定时器，然后重新设置一个定时器，在防抖时间后执行函数。
ES8 实现
ES8 中可以使用 async/await 和 Promise 来实现防抖。
-- -------------------- ---- -------
-------- ------------ ------ -
--- ----- - -----
------ ----- ---------- -
----- ------- - -----
----- ---- - ----------
--------------------
----- - ------------- -- -
----------------- ------
-- -------
----- --- --------------- -- ------------------- --------
--
-上面的代码中，我们在定时器后面添加了一个 Promise，在 await 完成后再执行函数。这样可以确保函数只会执行一次，而不是在定时器时间内的最后一次。
jQuery 实现
如果需要兼容 IE 浏览器，可以使用 jQuery 的 debounce 方法来实现防抖。
$(window).on('resize', $.debounce(300, function() {
console.log('resize');
}));上面的代码中，我们使用了 jQuery 的 debounce 方法来实现防抖。第一个参数是防抖时间，第二个参数是需要执行的函数。
节流
节流的原理是在一定时间内，只执行一次事件。这个时间就是节流时间。如果在这个时间内多次触发，只有第一次会被执行。这样可以避免事件频繁触发，提高性能。
ES6 实现
ES6 中可以使用时间戳和 setTimeout 来实现节流。
-- -------------------- ---- -------
-------- ------------ ------ -
--- ----- - -----
--- -------- - -----
------ ---------- -
----- ------- - -----
----- ---- - ----------
----- ------- - -----------
-- -------- - -------- - ------ -
-------- - --------
----------------- ------
- ---- -
--------------------
----- - ------------- -- -
-------- - --------
----------------- ------
-- ----- - -------- - -----------
-
--
-上面的代码中，throttle 函数接受两个参数，分别是需要执行的函数和节流时间。在函数内部，我们定义了一个 timer 变量来保存定时器的 ID，一个 lastTime 变量来保存上一次执行的时间戳。每次执行函数时，首先获取当前时间戳，如果当前时间戳和上一次执行的时间戳的差值大于节流时间，就执行函数。否则，重新设置一个定时器，在节流时间后执行函数。
ES8 实现
ES8 中可以使用 async/await 和 Promise 来实现节流。
-- -------------------- ---- -------
-------- ------------ ------ -
--- ----- - -----
--- -------- - -----
------ ----- ---------- -
----- ------- - -----
----- ---- - ----------
----- ------- - -----------
-- -------- - -------- - ------ -
-------- - --------
----------------- ------
- ---- -
--------------------
----- - ------------- -- -
-------- - -----------
----------------- ------
-- ----- - -------- - -----------
----- --- --------------- -- ------------------- --------
-
--
-上面的代码中，我们在定时器后面添加了一个 Promise，在 await 完成后再执行函数。这样可以确保函数只会执行一次，而不是在节流时间内的第一次。
jQuery 实现
如果需要兼容 IE 浏览器，可以使用 jQuery 的 throttle 方法来实现节流。
$(window).on('scroll', $.throttle(300, function() {
console.log('scroll');
}));上面的代码中，我们使用了 jQuery 的 throttle 方法来实现节流。第一个参数是节流时间，第二个参数是需要执行的函数。
总结
防抖和节流是优化前端性能的重要手段，可以避免事件频繁触发，提高页面性能。本文介绍了如何使用 ES6 和 ES8 实现防抖和节流，并且兼容 IE 浏览器。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a9137d10417a222a28aa9