#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;
});