点击事件的JQuery .done [英] JQuery .done on a click event

问题描述

我不是一个javascript开发人员，所以请耐心等待...

I'm not a javascript developer, so bear with me on this one...

我需要在jQuery 单击事件已完成。这就是我所拥有的，但我无法将 .done 应用于 .click 。将整个事物包装在 $。当不起作用时......

I need to perform a redirect after a jQuery click event has completed. This is what I have, but I can't apply .done to .click. Wrapping the whole thing in $.when doesn't work ether...

$("#printpng").click(function(){
            $('#tool_docprops').click();
            $('#tool_docprops_save').click();
            $('#tool_export').click()
        }).done(function(){
                window.location.href = "<?php echo $base_url ?>/sign/print"
        });

有没有人有更好的解决方案？

does anyone have any better solutions?

谢谢

推荐答案

假设每次点击都触发了你控制中的Ajax调用（否则你为什么会遇到这个问题），你可以简单地等待任何/所有Ajax请求完成：

Assuming each click is triggering an Ajax call out of your control (else why would you have this problem), you can simply await any/all Ajax requests to complete with:

$(document).ajaxStop(function () {
     window.location.href = "<?php echo $base_url ?>/sign/print"
  });

如果需要，您还可以在更改URL之前添加超时，以防有其他处理在Ajax加载之后。
如果它不是Ajax问题，请澄清，我将调整（或删除）这个答案。

You can also add a timeout, if required, before you change the URL in case there is additional processing after the Ajax load. If it is not an Ajax issue please clarify and I will adjust (or remove) this answer.

完整版（在Ajax之后延迟1秒）等待）可能看起来像：

Full version (with a 1 second additional delay after Ajax wait) might look something like:

$("#printpng").click(function(){
    $('#tool_docprops').click();
    $('#tool_docprops_save').click();
    $('#tool_export').click();
    $(document).ajaxStop(function () {
        setTimeout(function(){
             window.location.href = "<?php echo $base_url ?>/sign/print"
        }, 1000);
    });
});

正如所承诺的[原文如此]使用 promises

的更好解决方案

由于从未提供完整的代码，假设有多个ajax调用，解决方案就是猜测。

As promised [sic] a better solution using promises

As the full code was never provided, the solution was guesswork, assuming multiple ajax calls.

一般的解决方案是不点击事件，但只需按照承诺友好的方式调用每次点击的相关代码。

A generic solution is to not fire click events, but to simply call the related code for each click, in a promise-friendly way.

假设每个点击处理程序都有一个专用函数，函数返回一个承诺：

Assuming that each click handler has a dedicated function, just make each function return a promise:

例如

 function loadPropsViaAjax(){
     // simply return the ajax call as $.ajax returns a promise
     return $.ajax({parameters here});
 }

 function saveDocPropsViaAjax(){
     // simply return the ajax call as $.ajax returns a promise
     return $.ajax({parameters here});
 }

 function waitForImageToload(){
     // create a deferred object
     var def = $.Deferred();

     // When the image eventually loads, resolve the promise
     $('#someimageselector').on('load', function(){
        def.resolve();
     });

     // Return the promise immediately
     return def.promise();
 }

然后在你的例子中使用它（使用<$ c顺序运行） $ c> .then（））：

Then to make use of it in your example (running sequentially using .then()):

 // On click button event...
 $("#printpng").click(function(){
    // Run operations sequentially
    loadPropsViaAjax().then(saveDocPropsViaAjax).then(waitForImageToload)
        .done(function(){
            window.location.href = "<?php echo $base_url ?>/sign/print"
     });
 });

或者如果它们可以并行运行，请使用 $。：

Or if they can run in parallel, use $.when:

 // On click button event...
 $("#printpng").click(function(){
    // Run operations in parallel
    $.when(loadPropsViaAjax, saveDocPropsViaAjax, waitForImageToload)
        .done(function(){
            window.location.href = "<?php echo $base_url ?>/sign/print"
     });
 });

这篇关于点击事件的JQuery .done的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！