запуск setTimeout несколько раз для вызова ajax
У меня есть веб-страница, где пользователь может опубликовать вопрос, вопрос опубликован, а в случае успешного ответа добавляет текст в раздел «Ваш вопрос был опубликован». Затем 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;
});
});
Решение
похоже, что вы вызываете fadeOut для div, к которому вы добавляете сообщение, поэтому, когда он возвращается, этот div все еще скрыт, когда он добавляет текст
также удаление div из dom после fadeOut гарантирует, что в 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);
Другие решения
Похоже, проблема в том, что второй раз он не может быть применен, потому что ваш «#product_question» скрыт. Или, может быть, у вас есть несколько «#product_question» к тому времени, когда пользователь отправляет второй вопрос? Может быть, вам стоит попробовать использовать класс product_question вместо id? ‘.product_question’ против ‘#product_question’ — это ваши стили.
Дружище, я думаю, ты используешь слишком много кода. Есть скрытый 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);
}