Задержка между выполнением функций Jquery

#javascript #jquery #function #delay

#javascript #jquery #функция #задержка

Вопрос:

На моей странице есть 2 кнопки: #signin and #signup . Функции Click для них выглядят как приведенный ниже код. Проблема в том, что когда вы постоянно нажимаете на них, появляется большая задержка между выполнением функций. Есть ли способ выполнить их одновременно?

 var counter = 0,signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container"); 
$(".button").click(function () {
        if (counter === 0) {
            signin.removeClass('default_radius').addClass('right_radius');
            signup.removeClass('default_radius').addClass('left_radius');
            $("#first").animate({
                marginTop: "-=150px",
            }, 500);
        }

    });

    $("#signup").click(function () {
        if (counter === 0) {
           holder.addClass('red_border').height(275).slideDown("slow");
           f_container.show();
           signup_f.fadeIn(1200);
        } else {
           holder.animate({height:"275"},1000).switchClass( "green_border", "red_border", 1000 );
           signin_f.fadeOut(500);      
           f_container.animate({height:"260"},1000);
           signup_f.fadeIn(1000);
        }
        counter  ;
    });

    $("#signin").click(function () {
        if (counter === 0) {
            holder.addClass('green_border').height(125).slideDown("slow");
            f_container.show();
            signin_f.fadeIn(1200);
        } else {
           holder.animate({height:"125"},1000).switchClass( "red_border", "green_border", 500 );
           signup_f.fadeOut(500);                        
           f_container.animate({height:"110"},1000);           
           signin_f.fadeIn(1200);

        }

        counter  ;
    });
  

Вы можете увидеть код в действии здесь: http://tural.no-ip.org . Быстро и непрерывно нажимайте на кнопку, и вы увидите, о чем я говорю. Внешний js-файл: first.js .

Комментарии:

1. Я бы полагался на CSS для автоматического изменения размера.

2. пробовал и с css. анимация останавливается на 1-2 секунды во время «перенастройки» самого css

Ответ №1:

Используйте .stop() метод перед добавлением другой fade функции. Использование:

 signin_f.stop(true, true).fadeIn(1200);
//First argument true = Remove queued animations as well
//Second argument true = Immediately finish the current animation
  

Комментарии:

1. безуспешно пытался. tural.no-ip.org . Быстро и непрерывно нажимайте на кнопку, и вы увидите, о чем я говорю. Внешний js-файл: first.js .

2. Также добавьте .stop(true, true) перед animate() . Вместо этого вы также можете добавить signin_f.stop(true, true) в начале каждого прослушивателя событий.