关于js初始化对象的时间点的笔记

因为会点前端 到新公司之后 前端太忙 抽不出时间处理页面 所以索性就自己写了

但新公司的前端代码和以前写过的还不太一样 是直接引入的vue.js文件 而不是采用的npm创建的Vue项目 有点像以前使用jQuery的那种感觉

页面功能是 要使用 swiper(https://www.swiper.com.cn/) 这个滑动组件做一些图片的滑动处理 在使用这个组件的过程中碰到了js对象的创建先后时间点 会影响对象功能的正常使用的问题

下面上代码

<!-- 弹框区 -->
<el-dialog
  title=""
  :visible.sync="isShow"
  width="500"
  center>
　　<!-- 滑块 -->
  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide">111</div>
      <div class="swiper-slide">222</div>
      <div class="swiper-slide">333</div>
      <div class="swiper-slide">444</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</el-dialog>


<script type="text/javascript">
  // vue的某个method
  showInfo(e) {
    this.isShow = true;

    // 之前不生效的写法
    this.galleryTop = new Swiper('.gallery-top', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

    // 效果正常的
    setTimeout(() => {
      this.galleryTop = new Swiper('.gallery-top', {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    })
  },
</script>

　　

　　项目中使用的elementUI  有个弹框 (虽然elementui也有滑块组件 但满足不了需求)在弹框里 有个图片的滑块  点击页面上的某个按钮显示这个弹框。

最开始是点击按钮调用showInfo方法，然后直接 new Swiper对象，出现的结果就是CSS样式确实生效了 但swiper的前一个后一个按钮点击没反应

一开始以为是文件内引入的其他js文件造成的影响，排除其他js之后 发现还是无效 又以为是自己的用法有问题 就从官网上下载了demo 对比了一下也没发现问题

再之后 就在页面上copy了另一个不在弹框中的滑块作为对照 看是否是项目中引入的swiper版本有问题，测试之后发现 不在弹框中的滑块可以正常使用，并非版本问题

排除掉上面所有问题之后，我就只能在自己的写法上找问题了 就想到了会不会跟数据还没拿到或弹框的DOM节点未生成，而swiper对象就已经完成了初始化 找不到可以用于滑块的内容有关

于是就再次尝试用settimeout 让swiper对象的初始化往后靠，等待DOM节点的创建，结果就正常了。

        这个问题困扰了有一个多小时时间，趁着印象还算深刻 记录一下