如何仅第一次调用函数-JavaScript

注意：我需要用纯javascript实现这一点，我知道jquery中有一个

.one（）

方法来实现这一点，但我需要纯javascript中的相同输出

场景：当用户滚动并到达页面的3/4部分或更多部分时，我尝试调用一个函数，但当用户到达该部分时，问题就出现了，我们都知道他们不可能是像素完美的，因此，在满足条件后，该函数将按像素滚动执行

我希望只在满足条件后执行，然后在页面底部添加一个部分，然后用户再次到达底部，函数只执行一次，以此类推

片段：

var colors=[“天蓝色”、“粉蓝色”、“浅绿色”、“靛蓝”、“珊瑚色”]；
var addPage=函数（）{
var page=document.createElement（'div'）；
page.classList.add（'page'）；
page.style.backgroundColor=colors[Math.floor（Math.random（）*colors.length）]；
文件.正文.附件（第页）；
log（“添加了一个新页面”）；
}
var scrollAndAdd=函数（）{
如果（window.scrollY<（window.innerHeight*（3/4）））{
//每次尝试只执行一次addPage；它将创建无限多个页面
addPage（）；
}
}
window.addEventListener（'scroll'，scroll和add）
*{
保证金：0；
填充：0；
}
.第页{
高度：100vh；
}
我希望它能帮助您：


var colors=[“天蓝色”、“粉蓝色”、“浅绿色”、“靛蓝”、“珊瑚色”]；
var addPage=函数（）{
var page=document.createElement（'div'）；
page.classList.add（'page'）；
page.style.backgroundColor=colors[Math.floor（Math.random（）*colors.length）]；
文件.正文.附件（第页）；
log（“添加了一个新页面”）；
}
var scrollAndAdd=函数（）{
变量a=document.body.clientHeight-window.innerHeight*（5/4）
如果（window.scrollY>a）{
addPage（）；
}
}
window.addEventListener（'scroll'，scroll和add）
*{
保证金：0；
填充：0；
}
.第页{
高度：100vh；
}
只运行一次函数并不需要逻辑；相反，请使用不同的表达式来确定是否添加页面。添加页面后，在完成更多滚动之前，该表达式的计算结果将不再为true

注：我还改变了一点随机选择逻辑


var colors=['powderblue'，'lightgreen'，'indigo'，'coral'，'skyblue']；
var addPage=函数（）{
var page=document.createElement（'div'）；
page.classList.add（'page'）；
//确保未按顺序选择两次相同的颜色：
var colorIndex=Math.floor（Math.random（）*（colors.length-1））；
var color=colors.splice（colorIndex，1）[0]；
颜色。推送（颜色）；
page.style.backgroundColor=颜色；
文件.正文.附件（第页）；
}
var scrollAndAdd=函数（）{
if（window.scrollY>document.body.clientHeight-window.innerHeight-10）{
addPage（）；
}
}
window.addEventListener（'scroll'，scroll和add）
*{
保证金：0；
填充：0；
}
.第页{
高度：100vh；
}
那么，用当地国旗来装饰一下怎么样

var colors = ['skyblue', 'powderblue', 'lightgreen', 'indigo', 'coral'];


const localCurry = function(func, immediateAction) {
  var flag;
  return  function() {
    var context = this, args = arguments;
    var callNow = immediateAction && !flag;
    flag = true;
    if (callNow) func.apply(context, args);
  }
}


var addPage = localCurry(function() {
  var page = document.createElement('div');
  page.classList.add('page');
  page.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  document.body.append(page);
  console.log('added a new page');
}, true);

var scrollAndAdd = function() {
  var a = document.body.clientHeight - window.innerHeight * (5 / 4)
  if (window.scrollY > a) {
    addPage();
  }
}

window.addEventListener('scroll', scrollAndAdd);


现在，您可以根据计时器或自定义逻辑重置标志。
因此，您需要记住您执行了方法。添加全局变量并在添加额外页面时重置。您是否只希望添加一个页面，或者是否存在可以再次添加另一个页面的条件。用户应该首先再次向上滚动，还是有什么逻辑？@trincot假设有两页，那么身体的总高度应该是
200vh
（因为有一页是
100vh
），假设用户滚动到
190vh
，并尝试向下滚动，然后添加一个新页面，总身高现在是
300vh
，现在用户滚动到
290vh
，并且应该添加更多页面，等等……就像@HansKesting所说的，如果需要记住页面状态，请将该状态放入全局变量中，以便在函数中读取和更新。在脚本中的函数上方定义您的状态，并为其提供所需的初始值。您可以将用于确定是否应加载其他页面的阈值设置为动态。因为页面大小是固定的（100vh）l。所以，当你达到190个更新页面，新内容增加100到你的阈值，现在如果你超过这一行，会加载一个新页面吗？这正是我所面临的，这与我提供的有什么不同？@TowkirAhmed，请注意这是不同的。看看variable
a
。我确实这么做了，你是对的，但是第一次它确实像我一样创建了太多的页面，这会让你对答案投赞成票。@trincot，谢谢你，thant指出我的代码是正确的，而且，我比你更早发布它；）的确如此，@qiAlex，但这只是几秒钟的事——好主意往往同时出现；-）我给你投票。检查这行
var colorIndex=Math.floor（Math.random（）*（colors.lengt-1））
应该是
length
吗？我的意思是有一个打字错误，应该是
length-1
而不是
length-1
啊，是的：）修正了。浏览你的答案这是我最喜欢的享受活动之一，现在在这里，听到这是一件非常好的事情。谢谢