当前位置：网站首页>js数据类型、节流/防抖、点击事件委派优化、过渡动画

js数据类型、节流/防抖、点击事件委派优化、过渡动画

2022-08-04 21:00:00 【半夜删你代码·】

函数节流防抖

节流：多次变少次 --执行的时间段
防抖：多次变一次，只执行最后那一次（秒杀）--停止以后多长时间执行

解决浏览器的卡顿现象，减少对服务器的压力
用于频繁改变的事情，轮播图、秒杀、点击事件、联想输入

按需引入lodash减少打包体积
引入的时候不要去引入整个lodash
引入lodash/throttle

100秒触发100次
   正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）
   节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发
   防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会，也就是说如果连续快速的触发只会执行一次

<body>

  <button id="handle">测试不做函数节流/防抖</button>
  <button id="throttle">测试函数节流</button>
  <button id="debounce">测试函数防抖</button>
  
  <!-- 
    1. 事件频繁触发可能造成的问题?
        1). 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题
        2). 如果向后台发送请求，频繁触发，对服务器造成不必要的压力
    
    2. 如何限制事件处理函数频繁调用
        1). 函数节流
        2). 函数防抖

    3. 函数节流(throttle)
        1). 理解: 
            在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行时间后才会执行第二次
            适合多次事件按时间做平均分配触发
        2). 场景：
            窗口调整（resize）
            页面滚动（scroll）
            DOM 元素的拖拽功能实现（mousemove）
            抢购疯狂点击（click）
            
    4. 函数防抖(debounce)
        1). 理解:
            在函数需要频繁触发时: 在规定时间内，只让最后一次生效，前面的不生效。
            适合多次触发事件一次响应的情况
        2). 场景：
            输入框实时搜索联想（keyup/input）
  -->

  <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.js"></script>
  <script>
    /* 处理点击事件的回调函数 */
    function handleClick(event) { // 处理事件的回调
      console.log('处理点击事件', this, event)
    }

    document.getElementById('handle').onclick = handleClick
    /* 
    _.throttle(handleFn, delay, options)返回一个新函数, 就是绑定事件监听的回调函数(它是高频调用)
      handleFn: 真正处理事件的回调函数, 由throttle()返回的函数内部间隔指定的dalay时间后调用(少量调用)
    _.debounce()语法一样
    // */
    document.getElementById('throttle').onclick = _.throttle(handleClick, 2000)
    document.getElementById('debounce').onclick = _.debounce(handleClick, 2000)
  </script>

</body>

浏览器打开就有的东西：document--初始包含块--html--body
初始包含块：给浏览器里的东西一个初始的高度
子绝父不相：相对于初始包含块

js数据类型
基本数据类型：ES5、ES6
引用数据类型：数组、函数、对象
内置对象：math，正则
包装对象：数字，字符串，布尔

响应拦截器按顺序执行
请求拦截器先执行最后的那一个

安装包引入文件css和js
在package.json找main 的指定文件,如果时js文件，就可以直接引入
找到css文件位置，在这个包下的文件引入对应的文件

axios的内部是用.then串联起来
请求拦截器里写失败的回调，return Promise.reject(error)
如果不写return会返回undefined，下一个.then会进入成功的回调

在vuex当中state初始化数据后，组件就会直接拿过来，不需要等待异步

点击事件委派的优化

点击某个类别（无论几级）跳转到搜索页面
   先用声明式导航替换原来的a
   需要把类别的id和类别的名字通过query参数传递

使用编程式路由导航优化声明式导航组件对象过多造成的卡顿
   声明式导航本质上是组件对象，组件对象过多，会造成效率很慢所以会很卡

利用事件委派提高处理事件的效率
   每个分类项都添加事件，事件的回调函数很多，效率也不好
   在共同的祖先级元素添加事件监听

利用自定义属性携带动态数据
   标签的data-开头的属性，叫做自定义属性
   通过我们的标签对象.dataset
   1:事件绑给谁最近的公共的唯一一个祖先元素
2:找到目标元素（点的是不是a）
3:参数如何传递
    // 点击三级分类 事件委派处理跳转search界面
    toSearch(event) {
      let dataset = event.target.dataset
      // 盲解 点的是什么元素 不关心，大不了我解构4个undefined
      // 一旦有a标签categoryname一定存在，三个id也一定有一个
      let { category1id, category2id, category3id, categoryname } = dataset
      if (categoryname) {
        // 点的一定是a标签
        let location = {
          name: 'search',
        }

        let query = {
          categoryName: categoryname
        }

        if (category1id) {
          query.category1Id = category1id
        } else if (category2id) {
          query.category2Id = category2id
        } else {
          query.category3Id = category3id
        }

        location.query = query

        // 点击三级分类，跳转搜索页的时候，需要把之前带过来的params参数给合并上
        location.params = this.$route.params

        this.$router.push(location)
      }
    },