javascript - 如何仅第一次调用函数 - JavaScript
问题描述
注意:我需要使用纯 javascript 来实现这一点,我知道.one()
jquery 中有一种方法可以做到这一点,但我需要纯 javascript 中的相同输出。
场景:当用户滚动并到达页面的 3/4 或更多部分时,我试图调用一个函数,但是当用户到达该部分时,问题就出现了,我们都知道它们不可能是像素完美的,所以,之后满足条件时,函数会按像素滚动执行。
我希望它只在满足条件后执行,然后在页面底部添加一个部分,然后用户应该再次到达底部并且该功能应该只执行一次,依此类推......
片段:
var colors = ['skyblue', 'powderblue', 'lightgreen', 'indigo', 'coral'];
var addPage = 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');
}
var scrollAndAdd = function() {
if (window.scrollY < (window.innerHeight * (3 / 4))) {
// execute addPage only once for each attempt; it's creating infinite pages
addPage();
}
}
window.addEventListener('scroll', scrollAndAdd);
* {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
}
<div class='page' style='background-color: lightgreen'></div>
<div class='page' style='background-color: skyblue'></div>
解决方案
您真的不需要逻辑来运行该函数一次;相反,使用不同的表达式来确定是否添加页面。添加页面后,在完成更多滚动之前,相同的表达式不应再评估为 true。
注意:我也改变了一点随机选择逻辑。
var colors = ['powderblue', 'lightgreen', 'indigo', 'coral', 'skyblue'];
var addPage = function() {
var page = document.createElement('div');
page.classList.add('page');
// Make sure the same color is not selected twice in sequence:
var colorIndex = Math.floor(Math.random() * (colors.length-1));
var color = colors.splice(colorIndex,1)[0];
colors.push(color);
page.style.backgroundColor = color;
document.body.append(page);
}
var scrollAndAdd = function() {
if (window.scrollY > document.body.clientHeight - window.innerHeight - 10) {
addPage();
}
}
window.addEventListener('scroll', scrollAndAdd);
* {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
}
<div class='page' style='background-color: lightgreen'></div>
<div class='page' style='background-color: skyblue'></div>
推荐阅读
- google-apps-script - 使用 Google 电子表格发送电子邮件
- c# - 上传文件 ASP.NET 时生成错误消息
- java - 如何将行(行)打印为文本文件中的列?
- batch-file - 尝试使用批处理文件删除附加数字的文件名
- neo4j - 在 neo4j 中创建多个值节点之间的关系
- reactjs - useContext 和 useReducer Hooks 不起作用。错误:无法读取未定义的属性“状态”
- python - 在 Python 中使用 'del' 和 'gc.collect()' 主动管理内存是一种好习惯吗?
- jquery - 画布 jquery 代码不调用第二个函数
- iframe - 电子“强制重新加载”和 iframe 问题中的本地文件
- spring - AnnotationAwareAspectJAutoProxyCreator 为什么要实现 InstantiationAwareBeanPostProcessor