JS 防抖 与 节流

web页面渲染会经历如下步骤：js加载 —> style加载 —> layout(确定布局) —> paint(页面绘制) —> composite(组合控件)

网页生成的时候，至少会渲染（Layout+Paint）一次。用户访问的过程中，还会不断重新的重排（reflow）和重绘（repaint），用户scroll行为和resize行为会导致页面不断的进行重新渲染，如果间隔频繁，容易造成浏览器卡帧。

滚动事件的应用很频繁：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。

在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非常高，间隔很近。在日常开发的页面中，事件中涉及到的大量的位置计算、DOM操作、元素重绘等等这些都无法在下一个scroll事件出发前完成的情况下，浏览器会卡帧。

在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致浏览器卡顿。为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来减少调用的频率，减轻浏览器的负担。

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

以下是一个简单的JavaScript代码示例，它实现了一个基本的防抖功能：

这个代码定义了一个名为debounce的函数，它接受两个参数：要防抖的函数和防抖的时间间隔。当调用debounce函数时，它会返回一个新的函数，这个新函数将被用来代替原来的函数。

每次调用新函数时，它会清除之前设置的定时器，并创建一个新的定时器。如果在指定时间间隔内再次调用新函数，定时器将被清除并重新设置。只有在指定时间间隔内没有再次调用新函数时，定时器才会在最后一次调用后触发，并调用原始函数。

这个防抖函数可以用于限制某些操作的执行频率，例如在用户连续输入时进行搜索操作。这可以减少不必要的网络请求和计算资源消耗。

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

以下是一个简单的JavaScript代码示例，它实现了一个基本的节流功能：

这个代码定义了一个名为throttle的函数，它接受两个参数：要节流的函数和节流的时间间隔。当调用throttle函数时，它会返回一个新的函数，这个新函数将被用来代替原来的函数。

每次调用新函数时，它会检查是否已经设置了一个定时器。如果没有，它会创建一个新的定时器，并在指定的时间间隔后调用原始函数。如果已经设置了定时器，则新函数将不执行任何操作。

这个节流函数可以用于限制某些操作的执行频率，例如在用户滚动页面时更新页面元素的位置。