У меня есть небольшой фрагмент jquery, который отображает уведомление в верхней части экрана в ответ на действия пользователя на странице. Уведомление часто отображается после действий Ajax с динамическим содержимым внутри него.
Например:
$("#mini-txt").html("Thank you!");
$("#mini").fadeIn("fast");
setTimeout(function() {$("#mini").animate({height: "hide", opacity: "hide"}, "medium");}, 3000);
Уведомление работает хорошо, за исключением случаев, когда пользователь выполняет две или более действия в быстрой последовательности, и в этом случае функция TimeOut будет запутывать себя, а второе сообщение появится внутри предыдущих 3000 миллисекунд.
Есть ли способ "убить" предыдущее уведомление, если выполняется новое действие. У меня нет проблем с действиями/селекторами, просто функция TimeOut.... либо останавливает ее, либо переопределяет ее каким-то образом. Или, может быть, есть лучшая альтернатива для того, чтобы сообщение задерживалось на экране в течение нескольких секунд, прежде чем исчезнуть?
Спасибо.
Сначала вы сохраняете возвращаемое значение для функции setTimeout:
// Set the timeout
var timeout = setTimeout(function()
{
// Your function here
}, 2000);
Затем, когда вы готовы убить тайм-аут... вы просто вызываете clearTimeout с сохраненным значением от предыдущего вызова до setTimeout.
// Then clearn the timeout
clearTimeout(timeout);
Вы можете использовать . stop()
Остановить текущую анимацию на согласованные элементы.
jQuery 1.4 имеет встроенный метод обработки задержек для анимаций, вы можете сделать что-то вроде этого:
$("#mini-txt").html("Thank you!");
$("#mini").fadeIn("fast").delay(3000).animate({height: "hide", opacity: "hide"}, "medium");
И затем, когда вы захотите очистить очередь анимации, вы можете сделать:
$("#mini").stop(true);
Это позволит отключить таймаут после запуска функции с задержкой 500 мс
var timeout = setTimeout(function(){
/* YOUR FUNCTION */
}, 500, function(){
clearTimeout(timeout);
});