js函数防抖节流

// 3.1 函数防抖：
// 当持续触发事件时，一定时间段内没有再次触发事件，事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时。
// 也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次
// 函数防抖
function debounce (fn, time) {
  var timeout = null // 定义定时器
  return function () {
    if (timeout !== null) {
      clearTimeout(timeout) // 清除定时器
    }
    timeout = setTimeout(fn, time)
  }
}
function handle () {
  console.log(Math.random())
}

// 滚动事件
window.addEventListener('scroll', debounce(handle, 3000))
window.addEventListener('scroll', fn)

// 3.2 函数节流
// 当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次
// 用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行
// 实现函数节流我们主要有两种方法：时间戳和定时器

function throttle (func, delay) {
  var prev = Date.now() // 没有重新赋值  就是第一次的值
  return function () {
    var context = this // this指向window
    var args = arguments
    var now = Date.now()
    if (now - prev >= delay) {
      func.apply(context, args)
      prev = Date.now()
    }
  }
}

// function throttle (func, delay) {
//   var timer = null
//   return function () {
//     var context = this
//     var args = arguments
//     if (!timer) {
//       // 一定时间之后 执行回调 并将timer 置为null
//       timer = setTimeout(function () {
//         func.apply(context, args)
//         timer = null
//       }, delay)
//     }
//   }
// }

function handler () {
  console.log(Math.random())
}
// const cb = throttle(handler, 5000)
window.addEventListener('scroll', throttle(handler, 5000)) // scroll滚动事件执行的事件处理函数 实际上是里面return的函数
// PS：防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象