如何停止javascript中的重复函数

How to stop the repeating function in javascript?

本文关键字：函数 何停止 javascript      更新时间：2023-09-26
  • 这个javascript函数第一次发出警报为00 11 2233（即正常）
  • 当我第二次调用该函数时，它发出警报：00 11 22 22 33 33 33
  • 当我第三次调用该函数时，它会发出警报00 11 22 22 22 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();
        });
    });
}

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

$("#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。

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

$("#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。

相关文章：