window.setTimeout() problems

Question

I am new to vue js and i am trying to display two images at once onto my web page. To illustrate, each image has its own settings such as imagePosition(left or right) and imagedisplayTime(display for 2 seconds). So, let's consider this scenario, I have two images.

image1: settings (display on the right side, 2 seconds)

image2: settings (display on the left side, 2 seconds)

In order to display these images onto the website i am using the following 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);
      }
    },

Here, i check the image's position whether it is “right side”, i call “rightLoop function”. or left side, i call leftLoop funciton. Also, I use "window.settimeout() to display the image on the screen but the problem is that i am only able to display one image at a time because “settimeout” will only display the next image according to the “loop time” of the previous image. What i want however, is that to display both image at the same time onto the web screen with regard to their own time. Any suggestion on how to do that? I'd appreciate any help!

Answer 1

As you want to use vue.js, you need to look into vue components to accomplish what you need here.

Then, if you control the image rendering within a component, you can display two instances of your component, passing its loop time in props . Since each instance of the component can keep track of its loop time in its own data it will then be able to render itself according to that loop time.