从文本文档javascript中“旋转” /切换文本？
[英]“rotating” / switching text from text document javascript?
问题描述
I'm trying to pull the text from a text document and then split it so the first part before the "~" gets displayed in one div and then the rest gets added to the other div also it switches out the text so it first display the first row from the text document then after 5 sec it goes to row 2 etc and when it have display the last row it loops back to row one. 
我正在尝试从文本文档中提取文本，然后将其拆分，以使“〜”之前的第一部分显示在一个div中，然后将其余部分添加到另一个div中，它也会切换出文本，因此首先显示文本文档的第一行，然后在5秒钟后转到第二行，依此类推，当显示最后一行时，它将循环回到第一行。
Hopes it makes sense, It might be a problem with the JSFiddle code because of same-origin policy for the text document but I have tried it on my server and it don't work there either. 希望这是有道理的，由于文本文档的同源策略，这可能与JSFiddle代码有关，但是我已经在服务器上尝试过了，但是在那也不起作用。
What am I missing here? 我在这里想念什么？
Code example: JSFiddle 代码示例： JSFiddle
Inside the text document: 在文本文档中：
0.001TXT~Example text 01
0.002TXT~Example text 02
0.003TXT~Example text 03
0.004TXT~Example text 04
0.005TXT~Example text 05
0.006TXT~Example text 06
HTML: HTML：
<body>
<div id="numbers01">0.000</div>
<div id="text01">text</div>
</body>
Javascript : Javascript ：
$(document).ready(function () {
var lines = "";
$.get("http://www.patan77.com/example_text.txt", function (data) {
lines = data.split("\n");
});
var i = 0;
window.setInterval(function () {
if (i <= lines.length) {
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
i++;
} else {
i = 0;
}
}, 5000);
});
Thanks in advance. 提前致谢。
2 个解决方案
解决方案1
2 已采纳 2014-02-07 19:54:23
I don't have a complete answer yet but something to work with now, as JS calls are asynchrone by default, the code below is run before the data is even received. 我还没有一个完整的答案，但是现在可以使用一些东西，因为默认情况下JS调用是异步的，所以下面的代码在接收数据之前就已运行。 By moving the code inside the callback should fix your first problem. 通过在回调内移动代码应该可以解决您的第一个问题。
$(document).ready(function () {
var lines, i = 0;
$.get("http://www.patan77.com/example_text.txt", function (data) {
lines = data.split("\n");
window.setInterval(function () {
// Index is always in range
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
// Move this part to only control the index
if (i < lines.length) {
i++;
} else {
i = 0;
}
}, 5000);
});
});
Like that, it's much better but I couldn't get it to work yet. 这样，它要好得多，但我还无法使它正常工作。 Anyway as it still doesn't work yet... I decided to move to the more convenient ajax method like that. 无论如何，因为它仍然不起作用...我决定改用这样更方便的ajax方法。 I added an error handler... I believe that you're server might be blocking ajax requests as I'm receiving empty bodies. 我添加了一个错误处理程序...我认为您的服务器可能在接收到空主体时阻止了ajax请求。 If I load the url without ajax, it loads the file. 如果我加载不带ajax的URL，它将加载文件。
$(document).ready(function () {
var lines, i = 0;
$.ajax("http://www.patan77.com/example_text.txt", {
dataType: "text",
success: function (data) {
lines = data.split("\n");
window.setInterval(function () {
// Index is always in range
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
// Move this part to only control the index
if (i < lines.length) {
i++;
} else {
i = 0;
}
}, 5000);
},
error: function (xhr, error, errorThrown) {
console.log(error + " " + errorThrown);
}
});
});
Since I can't load the data, I did a small jsfiddle and mocked the data here 由于无法加载数据，因此我做了一个小jsfiddle并在此处模拟了数据
The problem was located on that line: 问题位于那条线上：
if (i <= lines.length) {
Instead of 代替
if (i < lines.length) {
解决方案2
2 2014-02-07 19:55:50
Put the whole code inside your $.get callback 将整个代码放入$ .get回调中
$(document).ready(function () {
$.get("http://www.patan77.com/example_text.txt", function (data) {
var lines = data.split("\n");
var i = 0;
window.setInterval(function () {
if (i <= lines.length) {
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
i++;
} else {
i = 0;
}
}, 5000);
});
});
Otherwise the window.setInterval function will be called while "lines" has not been filled yet due to jQuery AJAX function being asynchronous. 否则，由于jQuery AJAX函数是异步的，因此在尚未填充“行”时将调用window.setInterval函数。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.