IT技术 - jQuery - 可以完成线程/异步吗？ - 吾爱随笔录

jQuery - 可以完成线程/异步吗？

IT技术 javascript jquery django asynchronous

2021-02-24 03:18:33

我目前使用的AJAX与Django框架。

我可以将asynchronousPOST/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>

基本上它是一个bootstrap 3模态，带有jQuery DataTable，并带有一个进度条来向用户显示当前进度。

用于获取 Django 结果的 Javascript：

$('#chartSearchVariable').click(function(event)
{
    $('#chartConfigModal').modal("hide");
    $('#variableSearch').modal("show");

    var csrftoken = getCookie('csrftoken');
    var blockname = document.getElementById('chartConfigModalBlockname').value;

    $('#variableSearchProgressBar').css('width', "0%").attr('aria-valuenow', "0%");

    event.preventDefault();
    $.ajax(
    {
        type:"GET",
        url:"ajax_retreiveVariableNames/",
        timeout: 4000000,
        data:
        {
            'csrfmiddlewaretoken':csrftoken,
            'blockname':blockname
        },
        success: function(response)
        {
            if(response.status == "invalid")
            {
                $('#chartConfigModal').modal("hide");
                $('#variableSearch').modal("hide");
                $('#invalid').modal("show");
            }
            else
            {
                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%");
            }
        },
        failure: function(response)
        {
            $('#chartConfigModal').modal("hide");
            $('#variableSearch').modal("hide");
            $('#invalid').modal("show");
        }
    });
    return false;
});

$('#addSearchVariable').click(function(event)
{
    $('#variableSearch').modal("hide");
    $('#chartConfigModal').modal("show");
    document.getElementById('chartConfigModalVariable').value = currentVariableNameSelects;
});

$('#variableSearchDataCloseButton').click(function(event)
{
    $('#variableSearch').modal("hide");
    $('#chartConfigModal').modal("show");
});

问题在于更新表部分：

    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%");

由于 response.variables 可能超过 10k，它会冻结 Web 浏览器，即使它仍在绘制。

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

Javascript 中有没有办法进行线程/异步？我进行了搜索，结果被推迟/Promise，目前看起来非常抽象。

2个回答

尝试以增量方式处理检索到的数据。

在下面的部分中，元素以 250 块为单位生成，主要使用 jQuery deferred.notify()和deferred.progress()。

处理完所有 10,000 个项目后，该deferred对象resolved具有 10,000 个元素的集合。的元素，然后加入到document在单个呼叫到.html()内deferred.then（）的.done()回调; .fail()回调转换为null.

或者，可以document在deferred.progress回调中将元素附加到250 个 in 块中；而不是在内的单个调用中deferred.done，它发生在整个任务完成时。

setTimeout 用于防止“冻结网络浏览器”情况。

$(function() {
// 10k items 
var arr = $.map(new Array(10000), function(v, k) {
  return v === undefined ? k : null
});
  
var len = arr.length;
var dfd = new $.Deferred();
// collection of items processed at `for` loop in blocks of 250
var fragment = [];
var redraw = function() {
  for (i = 0 ; i < 250; i++)
    {
        // configurationVariableChart.row.add(
        // $(
        fragment.push('<tr>' +
                '<td>' + arr[i] + '</td>' +
            '</tr>')
        // )[0]);
    };
    arr.splice(0, 250);
    console.log(fragment, arr, arr.length);
    return dfd.notify([arr, fragment])
};

$.when(redraw())
// `done` callbacks
.then(function(data) {
  $("#results").html(data.join(","));
  delete fragment;
}
  // `fail` callbacks      
 , null
  // `progress` callbacks
 , function(data) {
  // log ,  display `progress` of tasks
     console.log(data);
     $("progress").val(data[1].length);
     $("output:first").text(Math.floor(data[1].length / 100) + "%");
     $("output:last").text(data[1].length +" of "+ len + " items processed");
     $("#results").html("processing data...");
     if (data[0].length) {
         var s = setTimeout(function() {
             redraw()
         }, 100)
     } else {
       clearTimeout(s);
       dfd.resolve(data[1]);
     }
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<progress min="0" max="10000"></progress><output for="progress"></output>
<output for="progress"></output><br />
<table id="results"></table>

jsfiddle http://jsfiddle.net/guest271314/ess28zLh/

延期/Promise在这里对你没有帮助。浏览器中的 JS 始终是单线程的。

诀窍不是通过 JS 构建 DOM 元素。那总是会很贵而且很慢。与其从 Django 传递 JSON 中的数据并动态构建 DOM，您应该让 Django 在服务器端呈现模板片段并将整个内容传递给前端，JS 可以简单地在相关点插入它.

@DanielRoseman 我想我知道你的意思，尝试在服务器端生成 HTML，然后放入客户端。我可以这样做，但我试图不这样做，因为我认为数据只是服务器应该传递的内容。

2021-04-15 03:18:33

但这就是为什么我说渲染一个片段，而不是整个页面。每个表仍然可以是一个单独的 Ajax 调用，但服务器会返回一个您插入的 HTML 块。

2021-04-16 03:18:33

@DanielRoseman 为什么要打扰？为什么不直接使用现有数据并在前端生成模板并附加一次？为什么在客户端和服务器之间混淆数据和 HTML？

2021-04-28 03:18:33

除了这样做，还有其他选择吗？因为整个页面是动态的，这意味着一些表格是由 JS 创建的，然后使用 AJAX 填充。过程中没有刷新？

2021-05-08 03:18:33

其它你可能感兴趣的问题

上一篇将 php 变量从控制器传递给视图头部的 javascript 函数下一篇ajax 响应后值未更新