在已经调用时阻止在滚动时调用ajax

Question

我有一个插件，告诉我一个元素在视口中是否可见$('#element').visible()（可见时设置为true。）

现在我想创建一个向下滚动页面并使用ajax加载新内容的函数。到目前为止我有这个：

window.onscroll = function() {
    console.log($('#ele').visible());

    if ($('#ele').visible()) {
               //ajax call comes here
    }

};

只要我看到该元素，我的日志显示为true：

我现在没有实现ajax请求的问题，但是我不应该阻止此功能只发生一次？我怎么能防止已经加载的新元素再次加载（防止再次使用ajax）？

我想过使用一个布尔变量，但我的问题是我不知道如何实现它，因为如果我设置一个变量，浏览器将如何知道它的价值？因为在鼠标滚轮的每一次移动中都无法记住该变量的值是什么？

编辑：

我尝试了Ismail的代码，它从未到达ajax调用（警告赢了＆＃t; t）。

window.onscroll = function() {
    var ajaxExecuted = false;
    var ele = $('#load_more').visible();
    console.log(ele);

    return function() {
        if (ajaxExecuted) return;

        if (ele) {
            alert("OK");
            var ajaxArray;
            ajaxArray = { page: 2 }
            ajaxLoadContent(ajaxArray, "load_more", "ajax_load");
            ajaxExecuted = true;
        }
    }
};

Answer 1

一个简单的解决方案：当元素首次变为可见时将布尔值设置为true，并在元素停止可见时将其设置为false。只有当这些状态不匹配时才触发请求（即如果它是可见的但是布尔值是假的 - 这意味着它是你第一次看到窗口。然后你会设置bool，这样它就不会再触发了，直到它消失并再次出现）。

Answer 2

您可以使用：

window.onscroll = (function() {
    var ajaxExecuted = false;
    return function() {
        if(ajaxExecuted) return;

        if ($('#ele').visible()) {
               $.ajax({...}).success(function() {
                   //Your code here;
                   ajaxExecuted = true;
               });
        }
    }
})();