我的js函数无法同时处理2个调用

时间:2016-10-09 14:40:12

标签: javascript jquery

我可以在同一时间调用此功能。

第一次调用:setInterval中运行并在没有动画的情况下跳转,

第二次通话:$(document).ready之后运行并正确执行。

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;
                }
            }

为什么会这样?有一种方法可以在一个函数上同时处理多个调用吗?

感谢。

1 个答案:

答案 0 :(得分:1)

我在另一个函数中使用了两个函数(例子)。你也可以看到,我使用了setInterval和ready()函数并同时执行。

<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>