Change image sky with time of handler tick

Question

Recently I put a post about How to change the image sky with time here

But, for the change of image I use the setTimeout function, I need to use the handler tick, to change image.

This HTML

<a-scene>
    <a-sky id="ou" material="opacity:1; src: ./3D/letras/Horizonte.jpg" foo>
        <a-animation id="fadeout-animation" attribute="material.opacity" dur="1000" direction="forward" from="1" to="0" begin="fadeout"></a-animation>
        <a-animation id="fadein-animation" attribute="material.opacity" dur="1000" direction="forward" from="0" to="1" begin="fadein"></a-animation>
    </a-sky>
    <!--<a-sky material="opacity:1; src: ./3D/letras/Horizonte.jpg" foo></a-sky>-->

</a-scene>

This my component

    AFRAME.registerComponent("foo", {

            init: function () {
                //Math.floor(time);
                var self = this.el;
                var fadeOutAnim = document.querySelector("#fadeout-animation");

                var images = ["./3D/letras/Agua.jpg", "./3D/letras/Aire.jpg", "./3D/letras/hector.jpg"];
                var index = 0;
                fadeOutAnim.addEventListener("animationend", (e) => {
                    self.setAttribute("material", "src", images[index]);
                    index++;

                    self.emit('fadein');

                });
            },
            tick: function (time, timeDelta) {
                time = Math.floor(time);
                console.log(time);
                var el = this.el;
                var fadeInAnim = document.querySelector("#fadein-animation");
                fadeInAnim.addEventListener("animationend", (e) => {

                    if (time >= 5000 && time <= 5030) {
                        el.emit('fadeout');
                    }

                });

                if (time >= 5000 && time <= 5030) {
                    el.emit('fadeout');
                }
            },
          }
        );

Question:

Is there any way to use tic time, to change? Thanks one more time

code working

Answer 1

You could have a temporary variable which will count the time using dt, and when it exceeds the time limit (5s ?) then set it back to 0;

AFRAME.registerComponent("foo", {
 init: function() {
  this.timer = 0
  this.flip = false
 },
 tick(function(time, dt) {
  this.timer += dt
  if (this.timer > 1000) {
   console.log("second has passed")
   if (flip)
     //fadein
   else
     //fadeout
   this.flip = !this.flip
   this.timer = 0
  }
 }
}

live fiddle here