window.setTimeout() 问题

Question

我是 vue js 的新手，我试图在我的 web 页面上一次显示两个图像。 为了说明，每个图像都有自己的设置，例如 imagePosition（左或右）和 imagedisplayTime（显示 2 秒）。 所以，让我们考虑一下这种情况，我有两个图像。

image1：设置（右侧显示，2秒）

image2：设置（左侧显示，2秒）

为了在网站上显示这些图像，我使用了以下 function：

callablelayout_assistant: function(new_layout, new_index, loop_time){
        if (new_layout === 1) {
        var position = this.loop_objects[new_index].position;
        if (position === 0) {
          this.left_timer = window.setTimeout(
            this.leftLoop.bind(undefined, new_index, new_layout), loop_time);
        } else if (position === 1) {
          this.right_timer = window.setTimeout(
            this.rightLoop.bind(undefined, new_index, new_layout), loop_time);
        }
      } else if (new_layout === 2) {

        var position = this.loop_objects[new_index].position;
        if (position === 0) {
          this.left_timer = window.setTimeout(
            this.leftLoop.bind(undefined, new_index, new_layout), loop_time);
        } else if (position === 1) {
          this.right_timer = window.setTimeout(
            this.rightLoop.bind(undefined, new_index, new_layout), loop_time);
        } else if (position == 2) {
          this.bottom_timer = window.setTimeout(
            this.bottomLoop.bind(undefined, new_index, new_layout), loop_time);
        }
      }
      else {
          clearTimeout(this.timer)
        this.timer = window.setTimeout(
          this.fullLoop.bind(undefined, new_index, new_layout), loop_time);
      }
    },

在这里，我检查图像的 position 是否是“右侧”，我称之为“rightLoop 函数”。 或左侧，我称之为 leftLoop 功能。 另外，我使用“window.settimeout() 在屏幕上显示图像，但问题是我一次只能显示一个图像，因为“settimeout”只会根据“循环时间”显示下一个图像上一张图片。然而，我想要的是在 web 屏幕上同时显示这两个图像关于他们自己的时间。关于如何做到这一点的任何建议？我会很感激任何帮助！

Answer 1

当你想使用 vue.js 时，你需要查看vue 组件来完成你所需要的。

然后，如果您控制组件内的图像渲染，则可以显示组件的两个实例，并在props中传递其循环时间。 由于组件的每个实例都可以在其自己的data中跟踪其循环时间，因此它将能够根据该循环时间呈现自己。