javascript - if 语句中的函数执行多次

Question

我有一个容器元素，它被加载多次，以通过 Ajax 请求在单击事件上显示变量内容，并且在 ajax 完成后，我调用了一些函数，包括 if 语句内的函数 (A)。

我的问题是，当函数 (A) 最终被调用时，它会被调用多次，具体取决于 if 语句为 true 之前容器已加载的次数。

这是我的代码的简单版本:

$(".button").on("click", function(){
  loadContainer();
});

var loadContainer = function(){
  $(".container").load(url, function(){
    var x = $(".x");
    if(x.length>0){
      A();
    };
  });
};

x 是一个将被加载到容器中的元素 $(".x")，并且只有在加载该元素时才应调用函数 (A) 。即 $(".x").length>0

如果 (x.length>0) 在加载容器 3 次后为 true，则函数 (A) 将被调用 3 次。

有没有办法解决这个问题，或者有办法确保函数 (A) 只被调用一次？

编辑:我的完整代码:

    ajaxBtn.on("click", function(e) {

        loadContainer(url, curtain, mainContainer, body, links);
   });
var loadContainer = function(url, curtain, maincontainer, body, links) {

        $(".main-container").load(url + " .main-container  > *", function() {
            $("#logo").css({
                "z-index": "400"
            });

            mainFun();
            curtain.removeClass("full");
            links.removeClass("here");
            body.removeClass("no-scroll");
            clearInterval(timer);
            getFlexIndex();
            position = 0;

            if (vidContainer.length > 0) {
                youTubeLazyLoad();
            }
        });
};

请假设所有变量都已定义。

Answer 1

听起来您多次添加相同的按钮点击监听器

您应该研究一下这是如何发生的，因为没有足够的证据让我们知道原因。它是否嵌入到另一个事件处理程序中？或者在一个被多次调用的函数中？

解决方法是在添加新点击监听器之前删除点击监听器

改变

$(".button").on("click"... 

到

$(".button").off('click').on("click"...