How do I perform one function after the end of another?

Question

How do I perform one function after the end of another?

Navigation

#1 by (0 votes)

1

My goal was to run one function at a time, but my functions that move the square are running together and I do not know how to do one run only after the other ends. Here's the code:

css:

#caixa1{
            width: 200px;
            height: 200px;
            background: green;
            position: relative;   
        }
        #caixa2{
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
        }

html:

<body>
    <div id="caixa1"> 
        <div id="caixa2">


        </div>
    </div>
 </body>

javascript:

var posH = 0
        var posL = 0
        var caixinha = document.getElementById("caixa2")
        var intervaloL = setInterval(movL,10)
        var intervaloH = setInterval(movH,10)
        //left = ir pro lado direito
        //top = vai pra baixo
        function movL()
        {
            if(posL >= 150)
            {
                caixinha.style.left = posL +'px'
            }else{
                posL += 1
                caixinha.style.left = posL + "PX"
            }
        }
        function movH()
        {
            if(posH >= 150)
            {
                caixinha.style.top = posL +'px'
            }else{
                posH += 1
                caixinha.style.top = posH + 'px'
            }
        }

javascript

asked by anonymous 10.12.2018 / 21:48

1 answer

Angular mask-input-masks in AngularJs Boostrap overwriting CSS. How to avoid?

score 0 · Accepted Answer

Just use clearInterval () on the variables created with setInterval and then call the other function when the first one finishes. In this case, one of the setInterval variables must be declared in advance, as shown below:

var posH = 0
var posL = 0
var caixinha = document.getElementById("caixa2")
var intervaloH = setInterval(movH,10); // chama a primeira função
var intervaloL; // declara a variável a ser usada posteriormente
//left = ir pro lado direito
//top = vai pra baixo
function movL()
{
   if(posL >= 150)
   {
       caixinha.style.left = posL +'px'
       clearInterval(intervaloL); // cancela o segundo SetInterval

   }else{
       posL += 1
       caixinha.style.left = posL + "px"
   }
}
function movH()
{
   if(posH >= 150)
   {
       caixinha.style.top = posH +'px'
       clearInterval(intervaloH); // cancela o primeiro SetInterval
       intervaloL = setInterval(movL,10); // chama a segunda função
   }else{
       posH += 1
       caixinha.style.top = posH + 'px'
   }
}

#caixa1{
   width: 200px;
   height: 200px;
   background: green;
   position: relative;   
}
#caixa2{
   width: 50px;
   height: 50px;
   background: red;
   position: absolute;
}

<div id="caixa1"> 
  <div id="caixa2">


  </div>
</div>