Question

我想在完成上一个自定义功能后才执行自定义功能。

我尝试了承诺，完成了，但是它没有正常工作。当第二个执行时，fisrt功能没有完全完成......

例如，我想执行function1（），然后仅在完成function1时执行function2：

function1();
function2();

我试过这个，但它根本不起作用：

promise(function1()).done(function2);

这里是我的function1的脚本：

function function1() {

    nbofslides = $('.Slide img').length;
    currentslide = 1;

    if ( nbofslides == currentslide) {

        if ( nbofslides > 1) {
            for (i = 1 ; i <= nbofslides ; i++) {
                if (i == 1) {
                    $('.slider-pagination').append('<li class="slider-page selected bgcolor2"></li>');
                } else {
                    $('.slider-pagination').append('<li class="slider-page bgcolor2"></li>');
                }
            }
        }

        $('.iosSlider').iosSlider({
            responsiveSlideContainer: true,
            responsiveSlides: true,
            snapToChildren: true,
            desktopClickDrag: true,
            keyboardControls: true,
            infiniteSlider: true,
            navSlideSelector: true,
            autoSlide: false,
            navNextSelector: $('.slider-next'),
            navPrevSelector: $('.slider-prev'),
            navSlideSelector: $('.slider-pagination .slider-page'),
            onSlideChange: slideChange
            });

        var setHeight = $('.iosSlider .Slide:eq(0)').outerHeight(true);
        $('.iosSlider').css({
            height: setHeight
        });

        function slideChange(args) {
        $('.slider-pagination .slider-page').removeClass('selected');
        $('.slider-pagination .slider-page:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
        }

    }
    currentslide++;

}

Answer 1

当功能1完成时，你必须通知功能2（或执行功能2的东西）。

var deferredObj = $.Deferred();

var function1 = function () {
    ... do some stuff ...
    ... and an ajax request ...
    $.ajax(...).done(function(){
        deferredObj.resolve();
    });
}

deferredObj.done(function(){
    function2();
});

但是，通过使$ .ajax 返回一个promise对象，jQuery使这更容易。

var function1 = function() {
    return $.ajax(...);
}

function1().done(function2)

Answer 2

不容易，因为大多数函数不需要任何“时间”来完成，它们只是“做一堆命令”，然后调用下一个函数。

在JQuery-Animations的情况下，它就像那样运行（JQuery API的代码）

var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:'-=200'},1500);
...

如果我们想将动画队列用于我们自己的功能，我们可以使用：

var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.queue(function () {
  alert('We are now at step 4 and if you press OK we go to 5.');
  $(this).dequeue();
});
div.animate({left:'-=200'},1500);
...

我希望这就是你要找的东西。

如果没有，请记住jQuery动画有成功功能的内置解决方案：

div.animate({left:'-=200'},1500,function(){
  // if animation done, use this code here
});

如果你想延迟命令，还有适合你的东西：

div.delay(800).effect("pulsate", {}, 2000).delay(800).queue(someOtherFunction);

在这种情况下，我们将等待800ms，而不是使用脉动效应（2000ms），再等待800ms，然后启动“someOtherFunction”。

Answer 3

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable, function() {
          function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
  ...do stuff
  callback();

}

jquery在另一个完成后运行自定义函数

3 个答案: