多次运行 setTimeout 进行 ajax 调用答案

【问题标题】：running setTimeout multiple times for ajax call多次运行 setTimeout 进行 ajax 调用
【发布时间】：2015-09-07 08:59:41
【问题描述】：

我有一个网页，用户可以在其中发布问题，发布问题并在成功响应时将文本附加到 div '您的问题已发布。然后 div 会在 1 秒后消失。

如果用户发布第二个问题（不刷新页面），则问题已成功插入数据库，但文本未附加到 div。

每次用户发帖时我都需要清除超时吗？

$(document).ready(function(){
    $('#postquestion').on('submit',function(e) {
        $.ajax({
            url:'/question.php',
            data:$(this).serialize(),
            type:'POST',
            success:function(data){         
                if($.trim(data) == "success") {
                    $('<div align=\"center\" style=\"padding-top:10px\"><p style=\"font-weight:bold;font-size:14px\">Your question has been posted.</p></div>').appendTo('#product_question');
                    setTimeout(function() {
                        $('#product_question').fadeOut('fast');
                    }, 1000);
                }
            },  
            error:function(data){
                $("#error").show().fadeOut(5000);   
            }
        });
        e.preventDefault();
        return false;
    });
});

【问题讨论】：

然后刷新页面后会发生什么？第二个问题出现了吗？
是刷新页面后显示的
但应该显示“您的问题已发布”的文本没有第二次显示

标签： php jquery ajax settimeout

【解决方案1】：

看起来你在向你附加消息的 div 上调用了 fadeOut，所以当它回来时，div 在附加文本时仍然隐藏

fadeOut 之后从 dom 中删除 div 将确保 dom 中一次只有一个 div

$('<div id=\"test\" align=\"center\" style=\"padding-top:10px\"><p style=\"font-weight:bold;font-size:14px\">Your question has been posted.</p></div>').appendTo('#product_question');
setTimeout(function() {
    $('#test').fadeOut('fast').remove();
}, 1000);

【讨论】：

是的，这就是我认为正在发生的事情，如何解决这个问题？
我粘贴的代码应该可以工作，也许可以更改 id 的名称 - 但这应该可以解决它

【解决方案2】：

看起来问题在于第二次无法申请，因为您的“#product_question”被隐藏了。或者，当用户发布第二个问题时，您可能有多个“#product_question”？也许您应该尝试使用“product_question”类而不是 id？ '.product_question' vs '#product_question' 是你的风格。

【讨论】：

【解决方案3】：

伙计，我猜你在其中使用了太多代码。有一个隐藏的 div：

<div id="test" class="myclass" align="center" style="padding-top:10px; display:none;"><p style="font-weight:bold;font-size:14px;">Your question has been posted.</p></div>

然后在您的回电中显示：

if($.trim(data) == "success") {

$('.myclass').css('display','block');

setTimeout(function() {
   $('.myclass').fadeOut('fast');
}, 1000);

}

【讨论】：