j查询更改复制操作

Question

我陷入了一个似乎很容易解决的问题，但我没有弄清楚。我有 3 个radio每个都有所选付款方式的数据属性，但问题是，在 jQuery 代码中，我需要根据所选的无线电switch提交 AJAX 请求。但是，如果我单击第一个无线电，给予并转到第三个无线电，我会收到 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 请求，并且你希望能够触发 ajax A，然后触发 ajax B 并取消 ajax A。

首先，你必须明白Ajax是异步的。这意味着当 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;
}
)}