Javascript jQuery-可以执行线程/异步吗？

我目前正在使用

AJAX

和

Django

框架

我可以将

asynchronous

POST/GET传递到

Django

，让它返回一个

json

对象

然后根据从Django传递的结果，我将循环遍历数据，并更新网页上的表

该表的HTML：

<!-- Modal for Variable Search-->
<div class="modal fade" id="variableSearch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Variable Name Search</h4>
            </div>
        <div class="modal-body">
            <table id="variableSearchTable" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th> Variable Name </th>
                    </tr>
                </thead>
            </table>
            <p>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" id="variableSearchProgressBar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                        <span class="sr-only">0% Complete</span>
                    </div>
                </div>
            </p>
            <p>
                <div class="row">
                    <div class="col-lg-10">
                        <button class="btn btn-default" type="button" id="addSearchVariable" >Add</button>
                    </div>
                </div>
            </p>
        </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="variableSearchDataCloseButton" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

问题在于更新表格部分：

    configurationVariableChart.row('').remove().draw(false);
    for (i = 0 ; i < response.variables.length; i++)
    {
        configurationVariableChart.row.add(
        $(
            '<tr>' +
                '<td>' + response.variables[i] + '</td>' +
            '<tr>'
        )[0]);
    }
    configurationVariableChart.draw();
    $('#variableSearchProgressBar').css('width', "100%").attr('aria-valuenow', "100%");

configurationVariableChart.row（“”）.remove（）.draw（false）；
对于（i=0；i

因为response.variables可以超过10k，并且它将冻结web浏览器，即使它仍在绘图

我对网页设计相当陌生（不到4个月），但我认为这是因为它们都运行在同一个线程上

---

Javascript中有没有实现线程/异步的方法？我进行了一次搜索，结果被推迟了/承诺了，目前看起来非常抽象。

推迟/承诺在这里对你没有帮助。浏览器中的JS始终是单线程的

---

诀窍是不要通过JS构建DOM元素。这将永远是昂贵和缓慢的。与从Django以JSON格式传递数据并动态构建DOM不同，您应该让Django在服务器端呈现一个模板片段，并将整个内容传递到前端，在前端，JS只需在相关点插入即可。

延迟/承诺在这方面对您没有帮助。浏览器中的JS始终是单线程的

---

诀窍是不要通过JS构建DOM元素。这将永远是昂贵和缓慢的。与从Django以JSON格式传递数据并动态构建DOM不同，您应该让Django在服务器端呈现一个模板片段，并将整个内容传递到前端，在前端，JS只需在相关点插入即可。

尝试增量处理检索到的数据

在下面的部分中，元素以250块的形式生成，主要利用jQuery和

处理完所有10000个项目后，

延迟的

对象通过10000个元素的集合被

解析

。然后，在调用

.html（）

的

.done（）

回调中，这些元素被添加到

文档中
.fail（）
回调强制转换为
null

或者，可以在
延迟内以250个块的形式将元素附加到
文档中；而不是在整个任务完成后发生的
deferred.done
内的单个调用中

setTimeout
用于防止出现“冻结web浏览器”的情况


$（函数（）{
//10万件
var arr=$.map（新数组（10000），函数（v，k）{
返回v==未定义？k:null
});
var len=阵列长度；
var dfd=新的$.Deferred（）；
//在“for”循环中以250块为单位处理的项目集合
var片段=[]；
var redraw=函数（）{
对于（i=0；i<250；i++）
{
//configurationVariableChart.row.add(
// $(
碎片。推（“”）+
“+arr[i]+”+
'')
// )[0]);
};
阵列拼接（0，250）；
console.log（片段、arr、arr.length）；
返回dfd.notify（[arr，fragment]）
};
$.when（重新绘制（））
//“完成”回调
.then（功能（数据）{
$（“#results”）.html（data.join（“，”）；
删除片段；
}
//'fail'回调
无效的
//“progress”回调
，函数（数据）{
//日志，显示任务的“进度”
控制台日志（数据）；
$（“进度”）.val（数据[1]。长度）；
$（“output:first”）.text（Math.floor（数据[1].length/100）+“%”；
$（“输出：最后一次”）.text（数据[1]。处理的“+len+”项的长度+”；
$（“#结果”）.html（“处理数据…”）；
如果（数据[0]。长度）{
var s=setTimeout（函数（）{
重画
}, 100)
}否则{
清除超时；
dfd.resolve（数据[1]）；
}
})
})



尝试增量处理检索到的数据

在下面的部分中，元素以250块的形式生成，主要利用jQuery和

处理完所有10000个项目后，
延迟的
对象通过10000个元素的集合被
解析
。然后，在调用
.html（）
的
.done（）
回调中，这些元素被添加到
文档中
.fail（）
回调强制转换为
null

或者，可以在
延迟内以250个块的形式将元素附加到
文档中；而不是在整个任务完成后发生的
deferred.done
内的单个调用中

setTimeout
用于防止出现“冻结web浏览器”的情况


$（函数（）{
//10万件
var arr=$.map（新数组（10000），函数（v，k）{
返回v==未定义？k:null
});
var len=阵列长度；
var dfd=新的$.Deferred（）；
//在“for”循环中以250块为单位处理的项目集合
var片段=[]；
var redraw=函数（）{
对于（i=0；i<250；i++）
{
//configurationVariableChart.row.add(
// $(
碎片。推（“”）+
“+arr[i]+”+
'')
// )[0]);
};
阵列拼接（0，250）；
console.log（片段、arr、arr.length）；
返回dfd.notify（[arr，fragment]）
};
$.when（重新绘制（））
//“完成”回调
.then（功能（数据）{
$（“#results”）.html（data.join（“，”）；
删除片段；
}
//'fail'回调
无效的
//“progress”回调
，函数（数据）{
//日志，显示任务的“进度”
    configurationVariableChart.row('').remove().draw(false);
    for (i = 0 ; i < response.variables.length; i++)
    {
        configurationVariableChart.row.add(
        $(
            '<tr>' +
                '<td>' + response.variables[i] + '</td>' +
            '<tr>'
        )[0]);
    }
    configurationVariableChart.draw();
    $('#variableSearchProgressBar').css('width', "100%").attr('aria-valuenow', "100%");