javascript - 防止在已经调用时在滚动时调用 ajax

Question

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

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

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

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

};

一旦我看到该元素，我的日志就会显示 true:

我现在实现ajax请求没有问题，但是我不应该阻止这个函数只发生一次吗？如何防止已经加载的新元素再次加载(防止再次使用ajax)？

我想过使用 bool 变量，但我的问题是我不知道如何实现它，因为如果我设置一个变量，浏览器如何知道它的值？因为我的鼠标滚轮每次移动时它都不记得该变量的值是什么？

编辑:

我尝试了 Ismail 的代码，但它从未到达 ajax 调用(警报不会显示)。

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

你可以使用这个:

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

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