javascript - Jquery 函数执行之间的延迟

标签 javascript jquery function delay

我的页面上有 2 个按钮:#signin 和 #signup。它们的单击功能类似于下面的代码。问题是,当您连续单击它们时,函数执行之间会出现很大的延迟。有没有办法同时执行它们?

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。

最佳答案

使用.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

关于javascript - Jquery 函数执行之间的延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8107527/

相关文章:

javascript - 在 React 中渲染模式

javascript - Angular 5 anchor 没有滚动

javascript - 如何保持 Dojo 开发的高效性并仍然使用 Dojo Build 进行部署?

javascript - 如何检查组件 Prop 是否是 React 中的函数?

javascript - jquery/javascript代码获取网页主页面的全文内容(包括链接文本,不包括图片)

c++ - 是否可以*安全地*从函数返回 TCHAR*?

PHP 从数据库中获取一些数据,然后将其输出到 JS 文件中

javascript - 鼠标悬停时子菜单消失

C - 用单个字符替换连续多次出现的字符

c - 警告 : control reaches end of non-void function [-Wreturn-type]