javascript - 如何在单个函数中调整 JavaScript 事件的顺序？

Question

有没有一种方法可以告诉浏览器等待另一个功能完成后再开始？

例如，在下面的 for 循环中，我希望 contact() 在 moveForward() 开始之前触发并结束。

for ($i = 0; $i <= ($slugPace - 1); $i++ ) {
    contract();
    moveForward();
    reset();
};

我尝试使用 $.when(//your first function).then(//your second function); 在 this stackoverflow thread 中提到，但是列出的三个函数中的 JS 函数继续同时触发。

这里是完整的代码，如果有帮助的话:

    //Contracting the slug once:
    function contract(){
        $("#slug").animate({
            marginTop: 0,
            width: $slugThinner,
            height: $slugHigher,
        }, 250);
        $(".slugContainer").animate({
            marginLeft: $slugLeftMargin,
        }, 250);
    };

    //Extending the slug out and move him forward once:
    function moveForward(){
        $slugLeftMargin += $slugStepsLength;
        $("#slug").animate({
            marginTop: $slugMarginJS,
            width: $slugWide,
            height: $slugHigh,
        }, 250);
        $(".slugContainer").animate({
            marginLeft: $slugLeftMargin,
        }, 250);
    };

    function movement(){
        for ($i = 0; $i <= $slugStepsTotal; $i++ ) {
            contract();
            moveForward();
        };
    }

    function reset(){
        if ($slugLeftMargin > $screenWidth) {
            $slugLeftMargin = $slugWide * -1;
            $("#slug").stop().hide;
            $(".slugContainer").stop.css('margin-left',$slugLeftMargin);
            for ($i = 0; $i <= ($slugPace - 1); $i++ ) {
                contract();
                moveForward();
            };
        }
    }

    //Looping the contractions to move our little friend across the screen:
    $("#slug").click(function(){
        //alert('Slug width: ' + $slugWide + ', Slug height: ' + $slugHigh + ', Screen width: ' + $screenWidth + ', Slug steps total: ' + $slugStepsTotal + ', Slug higher: ' + $slugHigher + ', Slug thinner: ' + $slugThinner);
        //alert($slugStepsTotal);
        //alert('One step: ' + $slugStepsLength + '; Total steps: ' + $slugStepsTotal + '; Screen width: ' + $screenWidth);
        $("#slug").show();
        $(".clickMe").fadeOut(300);
        $.when(movement).then(reset());
    });

预先感谢您的帮助。

Answer 1

一般来说，由于您使用的是 animate 方法，因此您可以使用回调来做一些事情，例如:

function contract(callback) {
    $("#slug").animate({
            marginTop: 0,
            width: $slugThinner,
            height: $slugHigher,
        }, 250);
     $(".slugContainer").animate({
            marginLeft: $slugLeftMargin,
     }, 250, function() {
       callback();
      }
    );

你会这样调用合约:

contract(function(){ moveForward(); });

您可以阅读更多关于 animate 的内容 here

这就是您需要的基本概念:回调。

祝你好运!