我有一个类似是/否(文本)按钮的 html 表,以及将点击请求传递到服务器的下面的 JavaScript。我正在转换此 JavaScript,它可以手动防止快速点击:
var MILLS_TO_IGNORE_LIKES = 500;
var processLike = function() {
//In this scope, "this" is the button just clicked on.
//The "this" in processLikeInner is *not* the button just clicked on.
var $button_just_clicked_on = $(this);
//The value of the "data-color_id" attribute.
var color_id = $button_just_clicked_on.data('color_id');
var processLikeInner = function(data, textStatus_ignored, jqXHR_ignored) {
//alert("sf data='" + data + "', textStatus_ignored='" + textStatus_ignored + "', jqXHR_ignored='" + jqXHR_ignored + "', color_id='" + color_id + "'");
$('#toggle_color_like_cell_' + color_id).html(data);
//Don't process requests too close together:
console.log('Like disabled for: ' + MILLS_TO_IGNORE_LIKES);
setTimeout(function() {
$button_just_clicked_on.one('click', processLike);
console.log('Like re-enabled for color_id ' + color_id + ' ');
}, MILLS_TO_IGNORE_LIKES);
}
var config = {
url: LIKE_URL_PRE_ID + color_id + '/',
dataType: 'html',
success: processLikeInner
};
$.ajax(config);
};
$(document).ready(function() {
/*
There are many buttons having the class
td__toggle_color_like_button
This attaches a listener to *every one*. Calling this again
would attach a *second* listener to every button, meaning each
click would be processed twice.
When a button is clicked, the listener for that *single button*
is disabled. It's re-enabled in processLikeInner with
$button_just_clicked_on.one('click', processLike);
*/
$('.td__toggle_color_like_button').one('click', processLike);
});
此版本使用 Underscore 。 “data”(html(data)
中的变量)应该更改为什么?
var MILLS_BTWN_LIKES = 500;
$(document).ready(function() {
/*
There are many buttons having the class
td__toggle_color_like_button
This attaches a listener to *every one*. Calling this again
would attach a *second* listener to every button, meaning each
click would be processed twice.
When a button is clicked, the listener for that *single button*
is disabled. It's re-enabled in processLikeInner with
$button_just_clicked_on.one('click', processLike);
*/
$('.td__toggle_color_like_button').click(_.debounce(function(e){
colorId = $('.td__toggle_color_like_button').data('color_id');
//console.log("colorId='" + colorId + "'");
$('#toggle_color_like_cell_' + colorId).html(data); //<-- here
}, MILLS_BTWN_LIKES));
});
最佳答案
正如评论中提到的,当您更改为 Underscore.js 时,ajax 请求被忽略。为了能够使用 data
,您必须首先完成 ajax 请求,这意味着您必须将 ajax 逻辑移至点击处理程序内。
var MILLS_BTWN_LIKES = 500;
$(document).ready(function () {
$('.td__toggle_color_like_button').click(_.debounce(function (e) {
console.log('Like disabled for: ' + MILLS_BTWN_LIKES);
var colorId = $(this).data('color_id'),
config = {
url: LIKE_URL_PRE_ID + color_id + '/',
dataType: 'html'
};
$.ajax(config).done(function (data) {
$('#toggle_color_like_cell_' + colorId).html(data);
});
}, MILLS_BTWN_LIKES));
});
但是,如果请求实际成功完成且时间低于 500 毫秒,则会出现问题。您还应该考虑对不成功的请求使用 fail
处理程序。
关于javascript - 当移动到 `data` 版本时, "inner"成功 AJAX 中的 "outer"变量应该更改为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28329157/