单击myFunction并等待它完成

On click myFunction and wait until it is finished

本文关键字：等待 myFunction 单击      更新时间：2023-09-26

我认为这是很容易做到的事情，但我没有找到任何帮助我走出这个

我有一个函数

(function($){
    myFunction = function(e){
        e.preventDefault();
        // do stuff
        // load ajax content
        // animate and show
    }
    $('.button').on( 'click', myFunction);
})(jQuery);

现在这个工作，但我需要知道，等到一切都完成了，如果有人按了许多.button s在短时间内，因为有一些元素与button类

I've try with promise() 

$('.button').on( 'click', function(){
    $.when( myFunction() ).done(function() {
        alert('finished')
    });
});

但是这给了我一个错误e is undefined和

$('.button').on( 'click', myFunction).promise().done(function() {
    alert('finisehd');
});

有人知道我做错了什么，我怎么做才能让它工作吗?

最常见的解决方案是在调用myFunction时在单击处理程序中设置一个变量，并在每次调用单击处理程序时检查其状态。这可以在下面这样的地方完成:

(function($){
    var wait = false;
    myFunction = function(e){
        e.preventDefault();
        if (wait) {
            return;
        }
        wait = true;
        // ...
        wait = false;
    }
    $('.button').on( 'click', myFunction);
})(jQuery);

您的函数myFunction期望一个参数，当您调用myFunction()时，该参数丢失。
没有测试，但应该可以工作:

$('.button').on( 'click', function(e){
    $.when( myFunction(e) ).done(function() {
        alert('finished')
    });
});

除了不传递e变量之外。你没有正确使用$.when。

如果希望在 myFunction完成ajax调用后调用done函数。你需要从myFunction返回一个承诺。

function myFunction(e) {
    return $.Deferred(function(deferred) {
        doAjax(function(content) { // callback
            deferred.resolve(content);
        });
    });
}

现在当你做

// inside event handler
$.when(myFunction(e)).done(function(content) {
    // whoo!
});
相关文章：