Zeev Katz Zeev Katz - 1 month ago 6
Javascript Question

My js function cant handle with 2 calling in the same time

Im call this function in the same time.

first call: run in

setInterval
and jump without my animation,

second call: run after
$(document).ready
and do it right.

fadeInFadeOut : function (oldContent, newContent, flag) {

hcGlobal.animateFlag = flag

switch (hcGlobal.animateFlag) {

case true:

$( oldContent ).stop().animate({
'top' : '30px',
'opacity' : '0'
}, 400, 'easeInOutBack', function() {

$( this ).html( newContent );

if (hcGlobal.animateFlag) {

$( this ).animate({
'top' : '0px',
'opacity' : '1'
}, 400, 'easeInOutBack');

hcGlobal.animateFlag = false

}

});

break;

case false:

$( oldContent ).html( newContent );

break;
}

}


Why its happing? there is a way to handle with multiple calling in the same time on one function?

Thanks.

RpR RpR
Answer

I have used two function inside another function(example). you can also see, i have used setInterval and ready() functions and executing simultaneously.

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body onload="myMove()">

<div id ="container">
<div id ="animate">
<p>hello</p>
</div>
</div>

<script>
function myMove() {

   setInterval(function(){

  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos+

    +; 
          elem.style.top = pos + 'px'; 
          elem.style.left = pos + 'px'; 
        }
      }
    },3000);

    }

    $(document).ready(function(){

    $("p").text("hi");
    });
    </script>

    </body>
    </html>