Question

点击提交按钮后，我想让动画功能显示2秒钟。我不知道如何使用setTimeout函数将所有内容放在一起

$(window).ready(function () {
"use strict";
var countdown = 2000;
setTimeout(function()){
var startAnimation = function () {//this is what I need to animate for 2 seconds
    $(".normal-actions").hide();
    $(".execute-actions").show();
 };

$("form").attr("action", "url");
$(".btn-submit").on("click", function () {
    $("form").submit;
});
});
}

当前代码（无法放入评论）页面保持加载状态并且不会重定向：

$(window).ready(function () {
    "use strict";

    var countDown = 2000;
    setTimeout(function(){
        $(".normal-actions").hide();
        $(".execute-actions").show();
    }, countDown);

    $("form").attr("action", "url");
    $(".btn-submit").on("click", function () {
        $("form").submit;
    });
});

Answer 1

您实际上从未调用过setTimeout，并且从未对UI进行过初始更改。单击提交时应该调用它。

$(window).ready(function () {
  "use strict";
  var countdown = 2000;

  var toggleAnimation = function () {//this is what I need to animate for 2 seconds
      $(".normal-actions").toggle(); //toggles between show/hide
      $(".execute-actions").toggle();
  };

  $("form").attr("action", "url");
    $(".btn-submit").on("click", function () {
      $("form").submit;
      toggleAnimation(); //first call start animation to change the UI
      setTimeout(toggleAnimation, countdown); //then call startAnimation again after 2 seconds to change it back
    });
  });
}

Answer 2

将动画设置为setTimeout()的函数回调：

setTimeout(function(){
    $(".normal-actions").hide();
    $(".execute-actions").show();
}, countDown);

或者如果您想重复使用您的功能：

var startAnimation = function () {
    $(".normal-actions").hide();
    $(".execute-actions").show();
};

setTimeout(startAnimation, countDown);

编辑：您的表单未提交，因为您没有唤起submit功能：

$(".btn-submit").on("click", function () {
    $("form").submit(); // <-- open and closed paren
});

Answer 3

$(window).ready(function () {
"use strict";
var countdown = 2000;

$("form").attr("action", "url");
$(".btn-submit").on("click", function () {
    //When the button is clicked change class to indicate that the process started
    $(".normal-actions").hide();
    $(".execute-actions").show();
    $("form").submit;
    //2 seconds later revert the changes in the classes
    setTimeout(function() {
       $(".normal-actions").show();
       $(".execute-actions").hide();
    }, 2000);
});

}

Answer 4

//
//  give this a go:
//
function wait( function_, time_out_in_ms ) {
    return function () {
        var args   = Array.prototype.slice.call( arguments ),
            target = this;
        setTimeout(
            function () {
                return function_.apply( target, args );
            },
            time_out_in_ms
        );
        return this;
    };
}
//
// use:
//
   var
        fn1 = wait(
               function () { console.log( this, arguments ); },
               3000
            );

   fn1.call( document, { info : "stuff" } );
   fn1(1,2);
//
//
//   Document & Window <-- returned imidiately
//
//     ... logged after 3 sec:
//   Document [Object { info="stuff"}]
//   Window [1, 2]
//

单击提交后加载动画的setTimeout

4 个答案: