我有个文本文件 cellphone.txt ,有三行内容
iPhone
Pixel
Windows Phone
在HTML文件中,我利用按钮(button)的onclick时间去触发下文中的 js 脚本中包含的函数 startOutput(),这个函数中先创建一个 id 为 outputStream 的段落,然后用 nodejs 里的 readline 模块按行读取 cellphone.txt 文件中的内容,每读取一行就更新到 outputStream 中去,实现顺序显示文件每行内容。但实际运行的时候,并不是依次显示 iPhone ,然后 Pixel ,最后再是 Windows Phone ,而是卡一阵子,然后 outputStream 段落中只显示最后一行内容 Windows Phone 。当然,你可能会说由于你这里只有三行,依次显示的速度太快了,你没看到前两次输出。换成一个拥有1000行内容的文本文件,效果也是卡一阵子,然后只输出最后一行。
HTML 文件:
<html>
<body>
<script src='output.js'></script>
<button type="button" onclick="startOutput()"></button>
</body>
</html>
JavaScript 文件:
//output.js
function startOutput() {
document.write('<p id="outputStream">初始文本<p>');
var fs = require('fs');
var lineReader = require('readline').createInterface({
input: fs.createReadStream('cellphone.txt') // 建立 txt 文件的读取流
});
lineReader.on('line', function (line) { //按行对读取流内容进行操作
document.getElementById("outputStream").innerHTML(line);
}
}
这里并不一定非要用button去触发这个函数。我的主要目的是在 html 页面中,按行显示文件内容(必须要有显示过程,先第一行,再第二行,然后以此类推),如果有其他方法可以实现这一点,欢迎 V 友提出,感谢大家!
1
bdbai 2017-04-03 21:24:13 +08:00 via Android
有点好奇 js 直接调用 nodejs 模块是怎么实现的?
|
2
HanningWu OP @bdbai 我在 node-webkit 中运行的,所以 js 中可以直接调用 nodejs ,是打算做一个 Web App
|
3
jarlyyn 2017-04-03 21:31:30 +08:00
document.getElementById("outputStream").innerHTML(line);
为什么会显示多行…… 你每次都吧元素的内容设置为当前行啊。 那最后当然只能看到最后一行了 |
4
qfdk 2017-04-03 21:34:07 +08:00 via iPhone
|
5
HanningWu OP @jarlyyn 我就是每次显示一行啊,但是由于 lineReader.on 这个方法循环了三次,所以对 outputStream 的内容改写了三次,理论上我应该能看到每次改写的变化的。
|
6
bombless 2017-04-03 21:58:52 +08:00 via Android
要依赖系统卡住这一点?
感觉还不如你主动卡住 setTimeout 等待行数乘以 1000 ,就能慢慢看到显示了 |
7
zbinlin 2017-04-04 00:06:59 +08:00 via Android
innerHTML 这里怎么是一个函数来的?
|
8
HanningWu OP @zbinlin 更正内容 innerHTML(line) 为 innerHTML = line
不好意思手快打错了。 |
10
SuperMild 2017-04-04 10:53:50 +08:00
建议看一下 D3.js ,有控制动态过程的功能。
|
11
123s 2017-04-04 12:07:07 +08:00 via Android
额,你一次过插入再做动画就好了,不然就要写多不少代码
|
12
bdbai 2017-04-04 13:38:07 +08:00 via iPhone
|
13
HanningWu OP @jarlyyn 最终是需要实现这样一个效果,示例代码: https://jsfiddle.net/09kuyn7v/ 。唯一不同的是,数据不是从数组中读取,而是从文件每一行读取出来,然后以同样的效果通过点击按钮显示到 html 的一个段落中去。
|
17
HanningWu OP @jarlyyn 我也是这么想的,所以后来又问了这个问题: https://www.v2ex.com/t/352731#reply24
|