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

Asked

Viewed 249 times

1

My goal was to run one function at a time, but my functions that move the square are running together and I don’t know how to make 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

  • I couldn’t understand no. What do you intend to do?

  • I don’t understand what you want to do, but take a look at callback

  • I want to run one function at a time, :/

  • dei uma editada espera que de para entender esta vez, :/

1 answer

0


Just use clearInterval() on the variables created with setInterval and then call the other function when the first one ends. In this case, one of the variables of the setInterval 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>

  • OK ,thanks for the help sam

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.