javascript - 当移动到 `data` 版本时， "inner"成功 AJAX 中的 "outer"变量应该更改为什么？

Question

我有一个类似是/否(文本)按钮的 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));
});

Answer 1

正如评论中提到的，当您更改为 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 处理程序。