防抖和节流方法实现

Posted 2020-10-30 叫我MrGuang

防抖简介

1. resize和scroll等事件操作的时候，会非常频繁的触发导致页面不断的重新渲染，非常影响性能，加重浏览器负担，导致用户体验不好，防抖函数就是当事件持续触发事件时，debounce函数会把事件合并且不会触发回调，当停止触发事件delay时长的时候才会触发事件。
   ```javascript
   function debounce(fn, delay, immediate) {
   // fn是回调函数，delay是延迟时间，immediate是否先执行一次再节流
   var timer = null,
   _this, args
   return function() {
   //
   _this = this
   args = arguments
   // 如果有定时器先清除，让定时器的函数不执行
   timer && clearTimeout(timer)
   if (immediate) {
   // 没有定时器的话，告诉后面的函数可以先执行一次，首次进入函数没有定义定时器，do为true
   var do = !timer
   // 然后在delay时间以后将timer设置为null，首次执行之后，只有在timer为null之后才会再次执行
   timer = setTimeout(function() {
   timer = null
   }, delay)
   if (do) {
   fn.apply(_this, args)
   }
   } else {
   // 如果没设置第三个参数，就是什么时候停止，之后delay时间才执行
   timer = setTimeout(function() {
   fn.apply(_this, args)
   }, delay)
   }

   }
   }

```

节流简介

1. 节流也是解决类似的问题，节流只允许回调函数在规定时间内只执行一次，和防抖的最大区别是，无论多频繁的触发事件，都会保证在规定时间内执行一次回调
   ```javascript
   function throttle(fn, delay) {
   var before = Date.now()
   return function() {
   var _this = this,
   args = arguments
   var now = Date.now()
   if (now - before - delay >= 0) {
   before = now
   setTimeout(function() {
   fn.apply(_this, args)
   }, delay)
   }
   }
   }

```