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：防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象

js函数防抖节流的相关教程结束。