jQuery更改複製操作

Question

我被困在一個似乎很容易解決的問題中，但我不知道。我有3 radio每個人都有他們的數據屬性爲選定的付款方式，但問題是，在jQuery代碼我需要提交一個AJAX請求，基於選定的收音機switch。但是如果我點擊第一個收音機，給第三個收音機，我會收到2個POST請求。對於第一個廣播和第三，何時應該是1. o.O

$("#payment-form input[name=payment_option]").change(function() { 
var payment_method = $("input[name=payment_option]:checked").data('payment-method'); 

$("#checkout-button").prop('disabled', false); 
console.log(payment_method); 
switch (payment_method) { 

    // First radio 
    case 'pagseguro': 
     $("#paypal-button").css('display', 'none'); 
     $("#checkout-button").css('display', 'block'); 
     $("#checkout-button").prop('disabled', false); 

     $checkout_button.click(function() { 
      $.ajax({ 
       url: 'http://usercp.dev/doacao/fazer-doacao/pagamento/pagseguro', 
       type: 'GET', 
       dataType: 'json', 
       success: function(response) { 
        if (response.success) { 
         var code = response.transaction_code 
         PagSeguroLightbox({ 
          code: code 
         }, { 
          success: function(transactionCode) { 
           $.post("http://usercp.dev/doacao/fazer-doacao/pagamento/received", { 
             payment_token: response.payment_token, 
             payment_method: response.payment_method, 
             transaction_code: transactionCode, 
             transaction_done: response.success, 
             csrf_token: $('meta[name="csrf-token"]').attr('content') 
            }) 
            .done(function(response) { 
             if (!response.success) { 
              toastr.error("Oops!", response.error) 
             } 
             window.location.replace(response.redirect); 
            }, 'json'); 
          }, 
          abort: function() { 
           toastr.options.positionClass = 'toast-top-center'; 
           toastr.info("Você cancelou a operação de pagamento."); 
           $(".loader").addClass('hidden'); 
          } 
         }); 
        } else { 
         toastr.options.positionClass = 'toast-top-center'; 
         toastr.error(response.error); 
         if (response.redirect !== "") { 
          window.location.replace(response.redirect); 
         } 
        } 
       } 
      }); 
      $(".loader").removeClass('hidden'); 
      $("#checkout-button").prop('disabled', true); 
      $("#checkout-button").html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>'); 
     }); 

     break; 

    // PayPal have their one button, so work without errors. 
    case 'paypal': 
     $("#paypal-button").css('display', 'block'); 
     $("#checkout-button").css('display', 'none'); 
     break; 

    // PicPay I try to use the same button as PagSeguro (first radio) 
    // but as I mentioned above, 
    // If selected PagSeguro first and jump to PicPay I'll see to post requests (one for PagSeguro and another for PicPay). I want to fix this. 
    case 'picpay': 
     $("#paypal-button").css('display', 'none'); 
     $("#checkout-button").css('display', 'block'); 
     $("#checkout-button").prop('disabled', false); 
     $checkout_button.click(function() { 
      $.ajax({ 
       url: 'http://usercp.dev/doacao/fazer-doacao/pagamento/picpay', 
       type: 'GET', 
       dataType: 'json', 
       success: function(response) { 
        if (!response.success) { 
         toastr.error("Oops!", response.error) 
        } 
        window.location.replace(response.redirect); 
       } 
      }); 
      $(".loader").removeClass('hidden'); 
      $("#checkout-button").prop('disabled', true); 
      $("#checkout-button").html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>'); 
     }); 
     break; 
} 

    }); 

HTML很簡單。

<input type="radio" class="radio" name="payment_option" id="payment_option" data-payment-method="pagseguro"> 

<input type="radio" class="radio" name="payment_option" id="payment_option" data-payment-method="paypal"> 

<input type="radio" class="radio" name="payment_option" id="payment_option" data-payment-method="picpay"> 

Answer 1

所以，你有2個按鈕，觸發每個不同的Ajax請求，並希望能夠觸發阿賈克斯，然後觸發阿賈克斯B和取消阿賈克斯A.

首先你必須明白，阿賈克斯是異步的。這意味着，當ajax開始時，它會觸發一個獨立於主線程的動作線程，在該線程中存在所有的javascript。

如果您想在B被觸發時取消A，或在A被觸發時取消B，則需要跟蹤您的ajax請求。

我能想到的最簡單的方法就是把你的AJAX內部變量

var currentAjax = $.ajax(/* Ajax A */) 

然後，當你觸發一個新的Ajax，你可以做這樣的事情，以擺脫前一個

if (currentAjax) { currentAjax.abort() } 

currentAjax = $.ajax(/* the new ajax you selected */) 

的

概括起來更好

我們有一個變量（可能是全球爲簡單起見），包含最後一個激活的AJAX

var currentPayAjax; 

$checkout_button.click(function() { 

    // an inefficient but doable way to try and cancel any potential previous get  
    try { currentPayAjax.abort() } catch(err){} 

    switch (payment_method) {  
     case 'pagseguro': 

     currentPayAjax = $.ajax({/* stuff A */}) 

     break; 
     case 'picpay': 

     currentPayAjax = $.ajax({/* stuff B */}) 

     break; 
    } 
)}