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

2023-12-19 14:42:28

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

但新公司的前端代码和以前写过的还不太一样是直接引入的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节点的创建，结果就正常了。

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

码农公寓

相关文章