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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title></head><body>  <div style="height: 3000px"></div></body><script src="./debounce.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/underscore@1.10.2/underscore.min.js"></script> --><script>  // 防抖函数  var debounce = _.debounce(function () {    console.log((new Date()))    console.log('hello debounce')  }, 1500, true)  window.onscroll = debounce  // 第三个参数为true 立即调用  滑动时立即执行  // 第三个参数为false 默认 等待1500时间后执行 两次触发间隔大于1500才执行  // 核心在于上一次调用防抖函数与这一次调用之间是否大于间隔1500 只有大于时才会执行  // 使用场景:发送ajax请求时使用  // 两次触发间隔大于指定值时调用</script></html>

实现:

// debounce.jsvar _ = {}_.now = Date.now_.debounce = function (func, wait, immediate) {  var lastTime, timeOut, args, result  // 防抖  var later = function () {    var last = _.now() - lastTime    if (last < wait) {      timeOut = setTimeout(later, wait - last)    } else {      timeOut = null      if (!immediate) {        result = func.apply(null, args)      }    }  }  return function () {    args = arguments    lastTime = _.now()    var callNow = immediate && !timeOut    if (!timeOut) {      timeOut = setTimeout(later, wait)    }    if (callNow) {      result = func.apply(null, args)    }     return result  }}