Question

我正在将一组注释导入到我的网页中，这是在循环中本地读取JSON文件并将读取数据附加到主div中。直到现在都没问题。但随后我在每个笔记旁边生成一个ckeditor实例，以便客户能够轻松地将注释添加到他感兴趣的注释中。注释最初是作为另一个HTML文件中的几个索引空div生成的，加载到ckeditor实例中。然而，所有这些都发生在一个非常大的for循环中（我使用if条件以分段方式加载了近6000个音符），所以现在我正在处理经典的闭包循环问题。已经阅读了以前的几个问题和答案foo这个和其他网站，并测试了其中一些以摆脱闭环问题，但到目前为止没有成功。

我的java脚本的相关部分具有以下结构：

var q;
$.when(
    $.ajax( ... loads the json file that contains the notes and set q=$.parseJSON(data) on success)
).then(function() {
    for(var i in q) {
         if(i is in a specific range){
                ... several lines of code for properly importing the notes ...
                ... and generating a place for the comments to appear as:
                ... +'<div id="CKEditor'+i+'" contenteditable="true" placeholder="Put your comment here!"></div>'
                ... which is appended to the main div of the webpage
                ... Now the main problematic part begins:   

                $('#temporary').empty();    // a hidden div defined somewhere in the page       
                var func = (function() {
                     var ilocal=i, tmp;
                     return function() {
                         tmp=document.getElementById('temporary').innerHTML;
                         alert(tmp);
                         CKEDITOR.instances['CKEditor'+ilocal].setData(tmp);
                     }
                })();
                $.when(
                    $('#temporary').load("NewComments.htm #verse-"+i)
                ).then(func);
         };
    };
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inlineAll();
})

也许问题不是针对循环而是针对嵌套的$ .when（）。then（），是否有解决问题的建议？

Answer 1

问题是页面中只有一个$('#temporary') div，每次迭代都会重复使用和覆盖。特别是在你的回调中

document.getElementById('temporary').innerHTML;
…
CKEDITOR.instances['CKEditor'+ilocal]

ilocal（和tmp）变量确实是IIFE的本地变量和特定的迭代，但document.getElementById是全局变量。它每次都会返回相同的元素。

快速解决方法是为每个请求创建一个新元素，并在迭代期间将其分配给tmp（就像您将i分配给ilocal）而不是func 1}}被称为但更好的做法是不要多次使用$('#temporary').load("NewComments.htm #verse-"+i)，而是每个Ajax仅加载一次NewComments.htm并根据需要处理结果。

可能是另一个闭环问题

1 个答案: