js学习第十五天

最新推荐文章于 2024-05-25 13:46:03 发布

qq_45753238

最新推荐文章于 2024-05-25 13:46:03 发布

阅读量348

点赞数 9

文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/qq_45753238/article/details/134600962

版权

防抖

在同一时间内频繁触发事件,只处理最后一次

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script src="./js/lodash.js"></script>
    <script>
      //  性能优化的手段
      //  防抖 - 在同一时间内 频繁触发事件,只处理最后一次
      // 自己实现的防抖函数
      // document.querySelector('input').addEventListener(
      //   'input',
      //   debounce(function () {
      //     console.log('输入')
      //   }, 400)
      // )

      // lodash库
      document.querySelector('input').addEventListener(
        'input',
        _.debounce(function () {
          console.log('输入')
        }, 400)
      )
      /*
        debounce(function () {
          console.log('输入')   
        })
        调用函数  function () {
          console.log('输入')
        } -> fn
        返回值 
        function () {
          setTimeout(function () {
           fn()
          }, 1000)
        }
      */
      // 高阶函数 fn->事件回调
      // function debounce(fn, t) {
      //   let setId
      //   return function () {
      //     clearTimeout(setId)
      //     setId = setTimeout(function () {
      //       fn()
      //     }, t)
      //   }
      // }

      // 思路
      /*
        当事件发生，不立即执行事件回调。给个500毫秒后执行事件回调(定时器），在500毫秒内
        再次触发事件,先取消上次的定时器，再重新开启一个定时器

        // 第一次事件触发 setTimeout(function() { 回调 },500)
        //  300毫秒 事件又触发了一次 clearTimeout取消上一次的定时器，再重开一个定时器
      */
    </script>
  </body>
</html>

节流

在同一时间内频繁触发事件,只执行一次

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>+</button>
    <script src="./js/lodash.js"></script>
    <script>
      //  性能优化的手段
      //  节流 - 在同一时间内 频繁触发事件,只执行一次
      document.querySelector('button').addEventListener(
        'click',
        _.throttle(function () {
          console.log('发请求')
        }, 3000)
      )

      // function throttle(fn, t) {
      //   let flag = false // 一开始 false表示没有任务执行
      //   return function () {
      //     if (flag) return
      //     flag = true
      //     setTimeout(function () {
      //       fn()
      //       flag = false
      //     }, t)
      //   }
      // }

      // 思路
      /*
         当第一次事件发生，把回调函数放到定时器 setTimeout(function () {回调调用},1000) 并且设置开关 把开关状态为true 
         当第二次事件发生  判断开关状态 false 可以处理当前回调， true返回 
      */
    </script>
  </body>
</html>