Как пропустить сообщение через 4-6 секунд с помощью jquery

Question

Я могу отобразить сообщение, используя javascript / jquery, и у меня есть запрос ajax, но это сообщение не исчезает через несколько секунд, и я хочу его удалить.

Мой код

$('#password_change_form').submit(function(e) {

    e.preventDefault();
    var saveThis = $(this);

    $.ajax({
        type: "POST",
        url: "/changepassword",
        data: $(saveThis).serialize(),
        success: function(data) {
            $(".success-messages").text("Heslo bylo úspešne zmeneno").fadeIn();

            setTimeOut(function(){
                $(".success-messages").fadeOut('slow');
            },2000);

            $('#password_change_form').trigger("reset");

        },
        error: function (data) {
            $(".error-messages").text("Zadali jste špatné heslo").fadeIn();

            setTimeOut(function(){
                $(".error-messages").fadeOut('slow');
            },2000);

            $('#password_change_form').trigger("reset");
        }

    });
}),

Я настроил функцию setTimeOut, но она не работает. Я не знаю, в чем проблема: здесь нужна ваша помощь!

Answer 1

Вы можете использовать JQuery delay () , и я сделаю что-то подобное в вашем случае:

$('#password_change_form').submit(function(e)
{
    e.preventDefault();
    var saveThis = $(this);

    $.ajax({
        type: "POST",
        url: "/changepassword",
        data: $(saveThis).serialize(),
        success: function(data)
        {
            var msg = "Heslo bylo úspešne zmeneno";
            $(".success-messages").text(msg).fadeIn().delay(2000).fadeOut("slow");
            $('#password_change_form').trigger("reset");
        },
        error: function (data)
        {
            var msg = "Zadali jste špatné heslo";
            $(".error-messages").text(msg).fadeIn().delay(2000).fadeOut("slow");
            $('#password_change_form').trigger("reset");
        }
    });
});

Answer 2

Помимо уже упомянутой простой опечатки, jQuery имеет свою собственную функцию delay (), просто используйте: $(".success-messages").delay(2000).fadeOut('slow')

Answer 3

Вам может не понадобиться setTimeout, так как jquery предоставляет fadeOut с такой подписью

$(selector).fadeOut(speed,easing,callback)

В скорости вы можете указать время в миллисекундах или slow или fast

$(".success-messages").fadeOut(2000);

Answer 4

В вашем коде есть опечатка:

setTimeOut(function(){
    $(".success-messages").fadeOut('slow');
},2000);

Это должно быть :

setTimeout(function() {
    $(".success-messages").fadeOut('slow');
}, 2000);

Вы всегда можете использовать JS-ссылку Mozilla Developer Network (MDN) для поиска деталей о синтаксисе: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

Answer 5

Можно также использовать:

 $(document).ready(function(){ 
   $(".foo_msg").fadeTo(2000, 500).slideUp(500, function(){
       $(".foo_msg").slideUp(600);
     });  
})

возиться со значениями, чтобы получить желаемое время, также включите "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" в тег скрипта

Answer 6

setTimeOut должно быть setTimeout.Вот и все.