Как установить максимальное количество раз, которое должен выполняться вызов ajax?

#jquery #ajax

#jquery #ajax

Вопрос:

Мне нужно ограничить количество раз, когда можно выполнить вызов ajax, до 30. Как я могу это сделать?

Вот мой код:

 jQuery(".clicass").on("click", function ($) { // When btn is pressed.
    jQuery(this).attr("disabled", true); // Disable the button, temp.
    let commentLikes = parseInt(jQuery(this).children('span').text())   1;
    jQuery(this).children('span').text(commentLikes.toString());

    let commentID = parseInt(jQuery(this).closest('article').attr('id').match(/d /));
    let ajaxThis = this;
    var datastr = 'amp;comment-id='   commentID   'amp;action=tutsplus_add_comment_meta';
    jQuery.ajax({
        type: "POST",
        dataType: "html",
        url: the_ajax_script.ajaxurl,
        data: datastr,
        success: function (data) {
            var $data = jQuery(data);
            jQuery(ajaxThis).attr("disabled", false);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR   " :: "   textStatus   " :: "   errorThrown);
        }

    });
    return false;
});
  

Кроме того, я новичок в jQuery, если вы видите какие-либо способы улучшения моего кода, напишите комментарий 🙂

Комментарии:

1. Поместите количество в глобальную переменную, увеличивайте его при каждом вызове функции и проверяйте, меньше ли оно 30.

2. Почему вы используете function ($) ? Аргументом обработчика щелчков является Event объект, почему вы должны использовать $ его в качестве имени для этого?

3. @Barmar Я использую $, потому что я видел, как другие люди используют его. Обычно я вижу букву e, но в вызовах ajax я видел знак доллара. Пример . Какова наилучшая практика?

4. jQuery(function($)...) Это особый случай. Это просто для запуска функции, когда документ готов, и jQuery передает себя в качестве аргумента для обратного вызова. Это не то же самое в обработчике событий.

5. Это позволяет вам использовать $(...) вместо jQuery(...) внутри этой функции, которая вам понадобится, если вы переопределили глобальную $ .

Ответ №1:

Используйте .data() метод, чтобы связать счетчик с каждым элементом. Увеличивайте счетчик при каждом вызове обработчика и возвращайтесь из функции, когда он достигнет 30.

 jQuery(".clicass").on("click", function() { // When btn is pressed.
  let counter = jQuery(this).data("counter");
  if (!counter) {
    counter = 1;
  }
  counter  ;
  if (counter > 30) {
    console.log("Reached limit, skipping");
    return;
  }
  jQuery(this).data("counter", counter   1);
  jQuery(this).attr("disabled", true); // Disable the button, temp.
  let commentLikes = parseInt(jQuery(this).children('span').text())   1;
  jQuery(this).children('span').text(commentLikes.toString());

  let commentID = parseInt(jQuery(this).closest('article').attr('id').match(/d /));
  let ajaxThis = this;
  var datastr = 'amp;comment-id='   commentID   'amp;action=tutsplus_add_comment_meta';
  jQuery.ajax({
    type: "POST",
    dataType: "html",
    url: the_ajax_script.ajaxurl,
    data: datastr,
    success: function(data) {
      var $data = jQuery(data);
      jQuery(ajaxThis).attr("disabled", false);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      $loader.html(jqXHR   " :: "   textStatus   " :: "   errorThrown);
    }

  });
  return false;
});