Question

我正在研究的项目有不像功能看起来像facebook但是当我一次点击多次按下按钮或不像按钮然后它的工作像开火，如果我有1或2喜欢和我点击很快就快了，然后我的喜欢在-2 -1。我怎么解决这个问题？如果点击很多次总能得到完美的结果。在我的jquery脚本下面

$(document).ready(function () {
    $(".like").click(function () {
        var ID = $(this).attr("idl");
        var REL = $(this).attr("rel");
        var owner = $(this).attr("owner");
        var URL = 'box_like.php';
        var dataString = 'msg_id=' + ID + '&rel=' + REL + '&owner=' + owner;
        $.ajax({
            type: "POST",
            url: URL,
            data: dataString,
            cache: false,
            success: function (html) {
                if (REL == 'Like') {
                    $('.blc' + ID).html('Unlike:').attr('rel', 'Unlike').attr('title', 'Unlike');
                    $('.spn' + ID).html(html);
                } else {
                    $('.blc' + ID).attr('rel', 'Like').attr('title', 'Like').html('Like:');
                    $('.spn' + ID).html(html);
                }
            }
        });
    });
});

Answer 1

这是因为ajax请求的异步特性....当你连续点击元素时... click事件将在上一个请求的响应返回并且链接状态更新到下一个之前被触发

案例：
假设rel不同，那么在响应再次出现之前会发生另一次点击，因此rel尚未更新，因此您要向服务器发送另一个unlike请求而不是类似请求< / p>

尝试以下解决方案（未测试）

$(document).ready(function () {
    var xhr;
    $(".like").click(function () {
        var ID = $(this).attr("idl");
        var REL = $(this).attr("rel");
        var owner = $(this).attr("owner");
        var URL = 'box_like.php';
        var dataString = 'msg_id=' + ID + '&rel=' + REL + '&owner=' + owner;
        if (REL == 'Like') {
            $('.blc' + ID).html('Unlike:').attr('rel', 'Unlike').attr('title', 'Unlike');
        } else {
            $('.blc' + ID).attr('rel', 'Like').attr('title', 'Like').html('Like:');
        }

        //abort the previous request since we don't know the response order
        if (xhr) {
            xhr.abort();
        }

        xhr = $.ajax({
            type: "POST",
            url: URL,
            data: dataString,
            cache: false
        }).done(function (html) {
            $('.spn' + ID).html(html);
        }).always(function () {
            xhr = undefined;
        });
    });
});

Answer 2

设置一个变量，我们称之为stop并切换它。

$(document).ready(function () {
    var stop = false;
    $(".like").click(function () {
        if (!stop)
        {
            stop = true;
            var ID = $(this).attr("idl");
            var REL = $(this).attr("rel");
            var owner = $(this).attr("owner");
            var URL = 'box_like.php';
            var dataString = 'msg_id=' + ID + '&rel=' + REL + '&owner=' + owner;
            $.ajax({
                type: "POST",
                url: URL,
                data: dataString,
                cache: false,
                success: function (html) {
                    if (REL == 'Like') {
                        $('.blc' + ID).html('Unlike:').attr('rel', 'Unlike').attr('title', 'Unlike');
                        $('.spn' + ID).html(html);
                    } else {
                        $('.blc' + ID).attr('rel', 'Like').attr('title', 'Like').html('Like:');
                        $('.spn' + ID).html(html);
                    }
                }
            }).always(function() { stop = false; });
        }
    });
});

当快速点击像按钮得到未知的喜欢

2 个答案: