Отключить ссылку, пока отсчет не закончится Jquery

Question

У меня есть ссылка, которая выглядит так:

<a class="modal-button" id="submitLink" > 

раз я нажимаю на него код JQuery запускается на выполнение и посылает AJAX вызов на мой сервер. Я сделал обратный отсчет, что если ajax-вызов не будет успешным, будет отображаться, и я хочу отключить ссылку, если обратный отсчет не закончится. Как я могу сделать это с помощью jquery?

Вот код обратного отсчета:

function countdown(duration, display) { 
var timer = duration, seconds; 
setInterval(function() { 

seconds = parseInt(timer % 60, 10); 

display.text("Try again in "+ seconds); 

if (--timer < 0) { 
    display.text("Done"); 
    return; 
} 
}, 1000); 
} 

и это мой щелчок событие:

$('#submitLink').on("click",function(){ 


$('#submit-text').html('<i class="fa fa-spinner fa-pulse"></i>'); 
$.ajax({ 
    type: "POST", 
    url: "something.php", 
    data: {somedata}, 
    success: function(data) 
    { var data= JSON.parse(data).data; 

    countdown(15,$('#submit-text')); 

    } 
}); 

}); 

Answer 1

Так что я использовал ответ A.Wolf, чтобы исправить это так. Я добавил атрибут данных с логическим значением:

<a class="modal-button" id="submit" data-disabled="false"> 

каждое звено времени щелкнуло я проверил, если это правда или ложь. Если это истинный возврат, в противном случае выполните ajax.Затем установите значение true в ajax success и на таймере установите его на false;

Answer 2

Попробуйте что-нибудь, как показано ниже:

var ajaxCallInProgress = false; 

$('#submitLink').on("click",function(){ 
    if(ajaxCallInProgress) { 
     return false; 
    } 
    $('#submit-text').html('<i class="fa fa-spinner fa-pulse"></i>'); 
    $.ajax({ 
     type: "POST", 
     url: "something.php", 
     data: {somedata}, 
     beforeSend: function(xhr) { 
      ajaxCallInProgress = true; 
     }, 
     success: function(data) 
     { 
      var data= JSON.parse(data).data; 
      countdown(15,$('#verify-text')); 
      $('#submit-text').text('Done'); 
      ajaxCallInProgress = false; 
     } 
    }); 

}); 

Answer 3

Я хотел бы сделать это следующим образом:

1. Клик-Event начинает обратный отсчет и запрос AJAX (с тайм-аутом Hight)
2. Сервер генерирует ссылку и удерживайте подключение X секунд, пока он не посылать запрос (генерируемый ссылка), поэтому никто может манипулировать таймер
3. Если запрос успешно, HREF должен быть заменен сгенерированной ссылкой
4. Если обратный отсчет заканчивается первым, сообщение об ошибке должно быть показан

Отсчет должен быть 2 или 3 секунды дольше, чем сервер держит соединения

Answer 4

решение:

Удалить ссылку по щелчку

$('#submitLink').on("click",function(){ 
    $(this).removeAttr("href"); 
}); 

Добавить ссылку

$("#submitLink").attr("href", "path/to/somewhere.html"); 

Answer 5

Вы можете добавить класс, например disabled, к элементу привязки:

<a class="modal-button disabled" id="submitLink">ajax link</a> 

Затем используйте следующую логику в coutdown() метода:

function countdown(duration, display) { 
    var timer = duration, 
     seconds; 
    var interval = setInterval(function() { 

     seconds = parseInt(timer % 60, 10); 

     display.text("Try again in " + seconds); 

     if (--timer < 0) { 
      display.text("Done"); 
      clearInterval(interval); 
      $('#submitLink').removeClass('disabled'); 
      return; 
     } 
    }, 1000); 
}; 

и связать обработчик делегировании его обработать селектор на лету:

$(document).on('click', '#submitLink:not(.disabled)', function() { 
    $('#submit-text').html('<i class="fa fa-spinner fa-pulse"></i>'); 
    $.ajax({ 
     type: "POST", 
     url: "something.php", 
     data: { 
      somedata 
     }, 
     success: function (data) { 
      var data = JSON.parse(data).data; 
      $('#submit-text').addClass('disabled'); 
      countdown(15, $('#submit-text')); 

     } 
    }); 
}); 

Это только один из способов, есть много способов, на достижение вашего ожидаемого поведения.