如何停止JavaScript中的重复功能？

Question

• 第一次使用此javascript函数，其警报为00 11 22 33（即正常）
• 当我第二次调用函数时，它发出的警报为00 11 22 22 33 33 33
• 第三次调用该函数时列出的项目，其警报为00 11 22 22 22 33 33 33 33 33
• 但我需要我打电话给第n次，第一个结果应该来了，谢谢

---

function exampleAddOption1(val, dat, pr) {
    var cases = 0;
    var bottles = 0;
    var price = 0;
    alert("00");
    $('#itt').append('<option value = "' + dat + '">' + val + '</option>');
    $('#autocomplete').val("");
    $(".logindiv").css("display", "block");
    $("#case").focus();
    $("#case").keydown(function (e) {
        var code = e.which;
        if (code == 13) {
            $("#bottle").focus();
        }
    });
    $("#bottle").keydown(function (e) {
        var code = e.which;
        if (code == 13) {
            $(".lgbtn").focus();
        }
    });
    alert("11");
    $(".lgbtn").click(function () {
        if ($("#case").val() != "") {
            cases = $("#case").val();
        } else {
            cases = 0;
        }
        if ($("#bottle").val() != "") {
            bottles = $("#bottle").val();
        } else {
            bottles = 0;
        }
        $("#case").val("");
        $("#bottle").val("");
        $(".logindiv").css("display", "none");
        $('#qty').append('<option value = "' + cases + ',' + bottles + '">' + cases + 'Cs, ' + bottles + 'Btl</option>');
        cases = 0;
        bottles = 0;
        $(".logindiv2").css("display", "block");
        $("#price").val(pr);
        $("#price").focus();
        alert("22");
        $("#price").keydown(function (e) {
            var code = e.which;
            if (code == 13) {
                $(".lgbtn2").focus();
            }
        });
        $(".lgbtn2").click(function () {
            alert("33");
            price = $("#price").val();
            $('#amt').append('<option value = "' + price + '">' + price + '</option>');
            $(".logindiv2").css("display", "none");
            $("#autocomplete").focus();
        });
    });
}

Answer 1

您的问题可以简化为以下代码段。

 $("#test1").click(function () { console.log("1"); $("#test2").click(function () { console.log("2"); $("#test3").click(function () { console.log("3"); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="test1" type="button" value="test1"/> <input id="test2" type="button" value="test2"/> <input id="test3" type="button" value="test3"/> 

单击顺序为test1，test2，test3的按钮。 单击test1将为test2添加一个处理程序。 单击test2将为test3添加一个处理程序。 控制台日志将显示1、2、3。再次，依次单击按钮test1，test2，test3。 单击test1将为test2添加另一个处理程序。 现在，Test2具有两个处理程序。 单击test2时，将执行两个处理程序，每个处理程序都会为test3添加一个附加处理程序。 现在，Test3具有三个处理程序。 单击test2时，将删除三个处理程序。 控制台日志将显示1、2、2、3、3、3。

一种可能的解决方案是在添加新的单击事件处理程序之前，删除现有的单击事件处理程序。 以下代码片段演示了该解决方案。

 $("#test1").click(function () { console.log("1"); $("#test2").off("click"); $("#test2").click(function () { console.log("2"); $("#test3").off("click"); $("#test3").click(function () { console.log("3"); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="test1" type="button" value="test1"/> <input id="test2" type="button" value="test2"/> <input id="test3" type="button" value="test3"/> 

单击按钮test1，test2，test3。 控制台显示1、2。3.再次单击按钮test1，test2，test3。 控制台根据需要显示1、2、3。