Question

我曾尝试编写一些jQuery，一旦单击按钮，它就会轮询服务器，一旦操作完成，它就会在网页上显示该消息。

此部分按预期工作，单击按钮后，将显示微调器，并显示轮询显示发送的电子邮件数。发送完所有电子邮件后，它会显示正确的消息，显示已发送的电子邮件数量以及发送的电子邮件数量是否有多少。

问题是，如果我再次单击该按钮，即使轮询现在正在运行并且不会消失，也会显示上一条消息，也不会显示微调器。

任何人都可以帮助解决此问题

因为我不知道为什么会发生这种情况

$(document).ready(function () {
    $("#spinner").hide();
    function doPoll() {
        $("#progressSend").html("");
        $("#progressSend").empty();
        $("#spinner").show();
        $.post("/pathtopolling", function (data) {
            if (data.startsWith("Completed")) {
                $("#progressSend").html("");
                $("#progressSend").html("<p class=\"text-info\">" + data + "1</p>");
                $("#spinner").hide();
                clearTimeout(doPoll);
            }
            else if (data.startsWith("Unable")) {
                $("#progressSend").html("");
                $("#progressSend").html("<p class=\"text-info\">" + data + "2</p>");
                $("#spinner").hide();
                clearTimeout(doPoll);
            }
            else {
                $("#progressSend").html("");
                $("#progressSend").html("<p class=\"text-info\">" + data + "3</p>");
                setTimeout(doPoll, 500);
            }

        });

    }
    var form = $("#frmSendMailingList");
    $(form).on("click", function (event) {
        $("#spinner").show();
        $("#progressSend").html("");
        $("#progressSend").empty();
        doPoll();
        event.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: $(form).attr("action"),
            data: $(form).serialize(),
            dataType: "json",
            cache: false,
            async: true,
            processData: false,
            success: function(result) {
                $("#spinner").hide();
                $("#progressSend").html("<p class=\"text-info\">" + result + "4</p>");
                clearTimeout(doPoll);
            },
            error: function(err) {
                $("#spinner").hide();
                clearTimeout(doPoll);
            }
        });
    });

            $("#btnMailingListReset").click(function () {
                location.reload(true);
                clearTimeout(doPoll);
            });
}).

Answer 1

像@SahilSharma一样，您应该在button上附加此事件。但是你的问题很正常，因为你每次点击回调都会被解雇。

如果触发了一个点击并且此布尔值为false，则必须在开头声明一个布尔值false，将其设置为true。当ajax完成时，将其设置为false。

// the boolean
var clicked = false;

$('#btnSendMailingList').on("click", function (event) {
  if(!clicked){
    clicked = true;
    $("#spinner").show();
    $("#progressSend").html("");
    $("#progressSend").empty();
    doPoll();
    event.preventDefault();
    jQuery.ajax({
        type: "POST",
        url: $(form).attr("action"),
        data: $(form).serialize(),
        dataType: "json",
        cache: false,
        async: true,
        processData: false,
        success: function(result) {
            $("#spinner").hide();
            $("#progressSend").html("<p class=\"text-info\">" + result + "4</p>");
            clearTimeout(doPoll);
        },
        error: function(err) {
            $("#spinner").hide();
            clearTimeout(doPoll);
        },
        complete: function(){
          clicked = false;
        }
     }
    });
});

Answer 2

尝试将Click事件与Form分开。在HTML中创建一个提交按钮并修改jQuery代码，如下所示：

<强> HTML

<input type="button" value="Submit Form" id="btnSendMailingList"/>

<强>的jQuery ：

$(document).ready(function () {
    $("#spinner").hide();
    function doPoll() {
        $("#progressSend").html("");
        $("#progressSend").empty();
        $("#spinner").show();
        $.post("/pathtopolling", function (data) {
            if (data.startsWith("Completed")) {
                $("#progressSend").html("");
                $("#progressSend").html("<p class=\"text-info\">" + data + "1</p>");
                $("#spinner").hide();
                clearTimeout(doPoll);
            }
            else if (data.startsWith("Unable")) {
                $("#progressSend").html("");
                $("#progressSend").html("<p class=\"text-info\">" + data + "2</p>");
                $("#spinner").hide();
                clearTimeout(doPoll);
            }
            else {
                $("#progressSend").html("");
                $("#progressSend").html("<p class=\"text-info\">" + data + "3</p>");
                setTimeout(doPoll, 500);
            }

        });

    }
    //var form = $("#frmSendMailingList"); Commented for fixation

    $('btnSendMailingList').on("click", function (event) {
        $("#spinner").show();
        $("#progressSend").html("");
        $("#progressSend").empty();
        doPoll();
        event.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: $(form).attr("action"),
            data: $(form).serialize(),
            dataType: "json",
            cache: false,
            async: true,
            processData: false,
            success: function(result) {
                $("#spinner").hide();
                $("#progressSend").html("<p class=\"text-info\">" + result + "4</p>");
                clearTimeout(doPoll);
            },
            error: function(err) {
                $("#spinner").hide();
                clearTimeout(doPoll);
            }
        });
    });

            $("#btnMailingListReset").click(function () {
                location.reload(true);
                clearTimeout(doPoll);
            });
}).

JQuery在按钮点击时显示上一条消息

2 个答案: