javascript - 使用文件中的内容加载文本区域

Question

问题

我的目标是能够将文本文档中的文本加载到 <textarea> 中为用户显示在屏幕上。 $.get() 调用能够检索内容并且似乎将它们存储在“notes”全局变量中，但是当调用 .val() 并传递给它的“notes”时，它似乎不是加载要在 <textarea> 中显示的字符串.

我已经阅读了之前关于 Stackoverflow 的几个问题以及 Google 上的其他文章，但到目前为止我还没有找到任何解决方案。有人有什么建议吗？

HTML

<div class="col-md-5 module">
   <h1>My Notes</h1>
   <form>
      <textarea id="note-app" class="full-width full-height" placeholder="Save your notes here..."></textarea>
   </form>
</div>

notes.js

var notes = "pie";

$.get("../docs/notes.txt", function (data) {
    console.log('Loading notes...');
    notes = data;
});


function loadNotes(data) {
    console.log('Data:\n{\n'+data+'\n}\n');
    $("#note-app").val(data);
}

$( document ).ready(loadNotes(notes));

输出

notes.js:14
Data:
{
pie
}

jquery.min.js:4 XHR finished loading: GET
"http://localhost:63342/Dad/docs/notes.txt".k.cors.a.crossDomain.send @
jquery.min.js:4n.extend.ajax @ jquery.min.js:4n.(anonymous function) @
jquery.min.js:4(anonymous function) @ notes.js:7
notes.js:8 Loading notes...

Answer 1

一些事情...

$( document ).ready(loadNotes(notes)); 立即调用 loadNotes，而不是等待文档准备就绪。您可以通过省略 () 来传递函数 - 但您只是在调用它。

当 loadNotes 被触发时，您的 $.get 调用有可能仍在运行。使用回调 - 等待完成 - 然后运行 ​​loadNotes

重构:

function getNotes(callback) {
    $.get("../docs/notes.txt", function (data) {
        console.log('Loading notes...');
        callback(data);
    });
}

function loadNotes() {
    getNotes(function(notes) {
        $("#note-app").val(notes);
    });
}

$(document).ready(loadNotes);