在动作之间发送Ajax消息setTimeOut m延迟

时间:2013-09-24 07:03:48

标签: javascript jquery ajax

您好我一直在尝试添加偶数延迟()或setTimeOut到这个简单的发送消息,但我想我不太清楚这是如何工作的,我一直在“包装”功能,但每次我得到很多语法错误,如果我“修复”他们我什么都没有,但所有行动一个接一个地完成,即使我设置延迟(8000)没有实际反映延迟

这是发送消息的脚本

 $.ajax({
      type: "POST",
      url: "sendtofriend.php",
      data: dataString,
      success: function() {
        $('#message').css("display", "none");
        $('#messagein').css("display", "block");
        $('#messagein').html("<div id='messageinin'></div>");
        $('#messageinin').html("<h2><%= t('generales.thankks') %></h2>")
        .append("<p><%= t('generales.msgsent') %>.</p>")

        .fadeIn(1500, function() {
          $('#messagein').append("<img id='checkmark' src='images/check.png' />");
        });

        $('#message').fadeIn(1500, function() {
          $('#messagein').css("display", "none");
         $('#message').css("display", "block");
        });

      }
     });
    return false;
  });


});

我尝试过很多东西,例如

  $.ajax({
          type: "POST",
          url: "sendtofriend.php",
          data: dataString,
          success: function() {
            $('#message').css("display", "none");
            $('#messagein').css("display", "block");
            $('#messagein').html("<div id='messageinin'></div>");
            $('#messageinin').html("<h2><%= t('generales.thankks') %></h2>")
            .append("<p><%= t('generales.msgsent') %>.</p>")
            .delay(8000)
            .fadeIn(1500, function() {
              $('#messagein').append("<img id='checkmark' src='images/check.png' />");
            });

            $('#message').fadeIn(1500, function() {
              $('#messagein').css("display", "none");
             $('#message').css("display", "block");
            });

          }
         });
        return false;
      });


    });

我的目标是#message在确认div'#messagein'可见时消失,然后取消确认并重新提取表单以提交另一条消息。

这是HTML

<div id='messagein'></div>
<div id='message'>

<form action="" method="post" id="sendfriendd">


<div id="inpumail" >

   <!-- <input type="text" name="" id="youremailaddress" size="40" value="<%= t('generales.tucorreoo') %>" class="text-input"  />  -->

     <input type="text" name="youremailaddress" id="youremailaddress" size="40" value="<%= t('generales.tucorreoo') %>" class="text-input" onblur="if(this.value == '') { this.style.color='#ccc'; this.value='<%= t('generales.tucorreoo') %>'}" onfocus="if (this.value == '<%= t('generales.tucorreoo') %>') {this.style.color='#000'; this.style.fontStyle='normal'; this.value=''}" style="color: rgb(120, 120, 120); font-style: normal;"/>  
    <label class="error" for="youremailaddress" id="youremailaddress_error">This field is required.</label>  

</div>


<br>
<div id="inpumail2" >


    <input type="text" name="friendsemailaddress" id="friendsemailaddress" size="40" value="<%= t('generales.amigcorreoo') %>" class="text-input" onblur="if(this.value == '') { this.style.color='#ccc'; this.value='<%= t('generales.amigcorreoo') %>'}" onfocus="if (this.value == '<%= t('generales.amigcorreoo') %>') {this.style.color='#000'; this.style.fontStyle='normal'; this.value=''}" style="color: rgb(120, 120, 120); font-style: normal;"/>  
    <label class="error" for="friendsemailaddress" id="friendsemailaddress_error">This field is required.</label>

</div>


<br>
<input type="submit" name="Submit" value=" <%= t('generales.enviarcorreoo') %> " class="enterrenvi">
</form>

1 个答案:

答案 0 :(得分:1)

函数delay在此示例中(追加后)不起作用,因为它只影响jquery动画。如果使用得当,setTimeout应该可以正常工作。

尝试删除延迟并更改:

$('#message').fadeIn(1500, function() {
    $('#messagein').css("display", "none");
    $('#message').css("display", "block");
});

成:

setTimeout(function() {
    $('#message').fadeIn(1000);
    $('#messagein').fadeOut(1000); //animate display none
},5000); //timeout 5 secs