Question

我试图通过在纯java脚本中使用setTimeout函数设置时间间隔来在模式框中显示不同的文本，但是先跳过setTimeout，然后跳过setTimeout直接执行，不确定确切的原因

function retry_emp(){

document.getElementById('error_text').innerHTML="Hold on...retrying  connection to server.It may take a while";
//This is not working setTimeout
    setTimeout(function(){

        document.getElementById('error_text').innerHTML="Still working.. It is taking longer than usual.";
    },7000);
    //This got executed directly
  setTimeout(function(){
        document.getElementById('error_text').setAttribute("style", "color:#F44336;");
     document.getElementById('error_text').innerHTML="Its all broken, please contact HR department for to help you on these";
    },7000);    
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  
  
  
  <div id="error_profile" class="modal" role="dialog" style="display: none">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                  
                    <h4 class="modal-title">INCIRCLE</h4>
                </div>
                <div class="modal-body">
                 
                  <p id='error_text' style="text-align:left"><br>Something went wrong, retry submitting  or try again later.
                    </div>

               

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" onclick="retry_emp()">Retry</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
                 </div>
            </div>

        </div>

Answer 1

你正在告诉javascript执行两个函数＆＃34;同时＆＃34;：在retry_emp调用后7秒。事实上，两个超时函数调用（有些ms）有一点时间，这就是为什么你只能在页面上看到第二个结果的原因。

也许你想拥有第一个功能，然后在第二个功能发射后7秒？

function retry_emp(){

document.getElementById('error_text').innerHTML="Hold on...retrying  connection to server.It may take a while";
//This is not working setTimeout
    setTimeout(function(){

        document.getElementById('error_text').innerHTML="Still working.. It is taking longer than usual.";
       //This got executed directly
      setTimeout(function(){
            document.getElementById('error_text').setAttribute("style", "color:#F44336;");
         document.getElementById('error_text').innerHTML="Its all broken, please contact HR department for to help you on these";
        },7000); 
    },7000);

}

第一个setTimeout函数没有在js中执行

1 个答案: