javascript - 如何使用追加停止 JavaScript for 循环
问题描述
我在使用 for 和显示数据时遇到问题。每次用户滚动到底部时向下滚动并添加 7 个字母,但是当字母完成时,它会给我两个未定义的我不知道如何解决它。我试过休息,但没有任何新东西。
你能帮我吗。谢谢
var x = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
var xLength = x.length;
for (var i = 0; i < 7; i++) {
$("#testDiv").append(`
<p>` + i + ` : ` + x[i] + `</p>
`);
}
window.onscroll = function() {
if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
console.log("It's working!");
}
}
window.onscroll = infiniteScroll;
var isExecuted = false;
function infiniteScroll() {
if (window.scrollY > (document.body.offsetHeight - window.outerHeight) && !isExecuted) {
isExecuted = true;
var fromItem = $("#testDiv").children().length;
for (var i = fromItem;
(i < fromItem + 7) && (xLength > fromItem); i++) {;
$("#testDiv").append(`
<p>` + i + ` : ` + x[i] + `</p>
`);
}
setTimeout(() => {
isExecuted = false;
}, 1000);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testDiv"></div>
解决方案
var x = [...'abcdefghijklmnopqrstuvwxyz']
for (var i = 0; i < 7; i++) {
if(x[i]){$("#testDiv").append(`<p>${i+1}: ${x[i]} </p>`);}
}
window.onscroll = infiniteScroll();
function infiniteScroll() {
var fromItem = $("#testDiv").children().length;
for (var i = fromItem; i <= x.length; i++) {
if(x[i]){$("#testDiv").append(`<p>${i+1}: ${x[i]} </p>`);}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testDiv"></div>
我使代码更具可读性并使用 if 语句解决了问题
推荐阅读
- ios - The following Swift pods cannot yet be integrated as static libraries
- developer-tools - JetBrains Toolbox 运行速度很慢
- ios - 如何让默认的 create-react-app 在旧 iPhone 上运行?
- swift - 接收者类型 '' 例如消息是前向声明(但标头在 .m 中导入)
- python - 编辑组中的数据框值
- winapi - C++/WinRT BLE 设备观察程序在调用 Start() 时抛出“非法状态更改”错误
- lua - 如何在 lua 中创建自定义大小的整数字段?
- node.js - React Native 中的 CreateSecureContext
- sql - 获取唯一的当前用户,具体取决于他们使用的在线平台
- verilog - Verilog 全局变量用法