jQuery的 - 可以在线程/异步做些什么呢？ [英] jQuery - Can threads/asynchronous be done?

问题描述

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

我可以通过异步 POST / GET到 Django的，并让它返回一个 JSON 对象。

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

有关表格的HTML：

 ＆LT;！ - 模态的可变搜索 - ＆GT;
＆LT; D​​IV CLASS =模式变脸ID =variableSearch的tabindex = -  1角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真＆GT;
    ＆LT; D​​IV CLASS =模式-对话框＆GT;
        ＆LT; D​​IV CLASS =模式内容＆GT;
            ＆LT; D​​IV CLASS =模头＆GT;
                ＆LT;按钮式=按钮级=关闭数据解雇=模式＆GT;＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT;＆LT;跨度类=SR - 只＆GT;关闭＆LT; / SPAN＆GT;＆LT; /按钮＆GT;
                ＆LT; H4类=模式标题ID =myModalLabel＆GT;变量名称搜索＆LT; / H4＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =模体＆GT;
            ＆LT;表ID =variableSearchTable级=显示CELLSPACING =0WIDTH =100％＆GT;
                ＆LT;＆THEAD GT;
                    ＆所述; TR＆GT;
                        ＆LT;第i个变量名称＆LT; /第i
                    ＆LT; / TR＆GT;
                ＆LT; / THEAD＆GT;
            ＆LT; /表＆gt;
            ＆所述p为H.;
                ＆LT; D​​IV CLASS =进步＆GT;
                    ＆LT; D​​IV CLASS =进度条进度条条纹活跃ID =variableSearchProgressBar角色=进度ARIA-valuenow =45ARIA-valuemin =0ARIA-valuemax =100的风格=宽度：45％＆GT;
                        ＆LT;跨度类=SR-只有大于0％完成＆LT; / SPAN＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆所述; / P＆GT;
            ＆所述p为H.;
                ＆LT; D​​IV CLASS =行＆GT;
                    ＆LT; D​​IV CLASS =COL-LG-10＆GT;
                        ＆LT;按钮类=BTN BTN-默认的TYPE =按钮ID =addSearchVariable＆gt;添加＆LT; /按钮＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆所述; / P＆GT;
        ＆LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =模式躯＆GT;
                ＆LT;按钮式=按钮级=BTN BTN-默认ID =variableSearchDataCloseButton数据解雇=模式＆GT;关闭＆LT; /按钮＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

基本上它是一个自举3 模式，与 jQuery的数据表，并用进度条显示给用户目前的进展。

这是用来获取的Django结果的JavaScript：

  $（'＃chartSearchVariable'）。点击（函数（事件）
{
    $（'＃chartConfigModal'）模态（隐藏）。
    $（'＃variableSearch'）模态（秀）。    变种csrftoken =的getCookie（'csrftoken'）;
    VAR块名称=的document.getElementById（'chartConfigModalBlockname'）值。    $（'＃variableSearchProgressBar'）的CSS（'宽度'，0％）ATTR（'咏叹调-valuenow'，0％）。;    。事件preventDefault（）;
    $阿贾克斯（
    {
        键入：GET，
        网址：ajax_retreiveVariableNames /
        超时：4000000，
        数据：
        {
            csrfmiddlewaretoken'：csrftoken，
            块名称：块名称
        }，
        成功：函数（响应）
        {
            如果（response.status ==无效）
            {
                $（'＃chartConfigModal'）模态（隐藏）。
                $（'＃variableSearch'）模态（隐藏）。
                $（'＃无效'）模态（秀）。
            }
            其他
            {
                。configurationVariableChart.row（''）删除（）绘制（假）;
                对于（i = 0; I＆LT; response.variables.length;我++）
                {
                    configurationVariableChart.row.add（
                    $（
                        '＆LT; TR＆GT;' +
                            '＆LT; TD＆GT;' + response.variables [I] +'＆LT; / TD＆GT;' +
                        '＆LT; TR＆GT;'
                    ）[0]）;
                }
                configurationVariableChart.draw（）;
                $（'＃variableSearchProgressBar'）的CSS（'宽'，100％），ATTR（'咏叹调-valuenow，100％）。;
            }
        }，
        故障：功能（响应）
        {
            $（'＃chartConfigModal'）模态（隐藏）。
            $（'＃variableSearch'）模态（隐藏）。
            $（'＃无效'）模态（秀）。
        }
    }）;
    返回false;
}）;$（'＃addSearchVariable'）。点击（函数（事件）
{
    $（'＃variableSearch'）模态（隐藏）。
    $（'＃chartConfigModal'）模态（秀）。
    。的document.getElementById（'chartConfigModalVariable'）值= currentVariableNameSelects;
}）;$（'＃variableSearchDataCloseButton'）。点击（函数（事件）
{
    $（'＃variableSearch'）模态（隐藏）。
    $（'＃chartConfigModal'）模态（秀）。
}）;
 

问题是与更新表的一部分：

  configurationVariableChart.row（''）删除（）绘制（假）。
    对于（i = 0; I＆LT; response.variables.length;我++）
    {
        configurationVariableChart.row.add（
        $（
            '＆LT; TR＆GT;' +
                '＆LT; TD＆GT;' + response.variables [I] +'＆LT; / TD＆GT;' +
            '＆LT; TR＆GT;'
        ）[0]）;
    }
    configurationVariableChart.draw（）;
    $（'＃variableSearchProgressBar'）的CSS（'宽'，100％），ATTR（'咏叹调-valuenow，100％）。;
 

由于response.variables可以超过10,000，并且它将冻结的网络浏览器，即使它仍然是绘制

我是pretty新的网页设计（不到4个月），但我以为这是因为它们都是在同一个线程上运行。

有一个JavaScript的方式做线程/异步？我有一个搜索，结果被推迟/承诺这在目前似乎很抽象。

解决方案

尝试逐步处理检索到的数据。

在下面一片，250块，主要是利用jQuery的生成元素 deferred.notify（）和 deferred.progress（）。

当所有10,000项处理时，延迟对象解析 10000元素的集合。然后，将元素添加到文件在单一调用的.html（）的 deferred.then（）的 .done（）回调; .fail（）回调投为空。

此外，可以附加在 deferred.progress 元素250，块文件回调;而不是在内部 deferred.done 的单呼，发生整个任务完成后进行。

的setTimeout 被用来prevent冻结Web浏览器状态。

\r

\r

$（函数（）{\r
// 10K项目\r
VAR ARR = $ .MAP（新阵列（10000），功能（V，K）{\r
  返回v ===未定义？ K：空\r
}）;\r
  \r
VAR LEN = arr.length;\r
VAR DFD =新的$ .Deferred（）;\r
// 250块在`for`循环处理的项目集合\r
变种片段= [];\r
VAR重绘=功能（）{\r
  对于（i = 0; I＆LT; 250;我++）\r
    {\r
        // configurationVariableChart.row.add（\r
        // $（\r
        fragment.push（'＆LT; TR＆GT;'+\r
                '＆LT; TD＆GT;' + ARR [I] +'＆LT; / TD＆GT;' +\r
            '＆LT; / TR＆GT;'）\r
        //）[0]）;\r
    };\r
    arr.splice（0，250）;\r
    的console.log（片段，编曲，arr.length）;\r
    返回dfd.notify（[ARR，片段]）\r
};\r
\r
$。当（重绘（））\r
//`done`回调\r
。然后（功能（数据）{\r
  $（＃结果），HTML（data.join（））。\r
  删除片段;\r
}\r
  //`fail`回调\r
 ， 空值\r
  //`progress`回调\r
 ，功能（数据）{\r
  //日志，显示`任务progress`\r
     的console.log（数据）;\r
     $（进步）VAL（数据[1]。长度）;\r
     $（输出：第一）文本（Math.floor（数据[1]。长度/ 100）+％）;\r
     $（输出：最后一个）文本（数据[1]。长度+的+ LEN +处理的项目）;\r
     $（＃结果），HTML（处理数据......）。\r
     如果（数据[0]。长度）{\r
         变种S = setTimeout的（函数（）{\r
             重绘（）\r
         }，100）\r
     }其他{\r
       clearTimeout（多个）;\r
       dfd.resolve（数据[1]）;\r
     }\r
}）\r
}）

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js\"></script>\r
＆LT;进步分钟=0最大值=10000＆GT;＆LT; /进度＆GT;＆lt;用于=进步＆GT输出;＆LT; /输出GT;\r
＆LT;输出=进步＆GT;＆LT; /输出GT;＆LT; BR /＆GT;\r
＆LT;表ID =结果＆GT;＆LT; /表＆gt;

\r

\r

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

I'm currently using AJAX with Django Framework.

I can pass asynchronous POST/GET to Django, and let it return a json object.

Then according to the result passed from Django, I will loop through the data, and update a table on the webpage.

The HTML for the table:

<!-- 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>

Basically it is a bootstrap 3 modal, with jQuery DataTable, and with a progress bar to show the user the current progress.

The Javascript that is used to get Django results:

$('#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");
});

The problem is with the updating table part:

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

Since the response.variables can be over 10k, and it will freeze the web browser, even though it is still drawing.

I'm pretty new to Web Design (less than 4 months), but I assume it's because they are all running on the same thread.

Is there a way in Javascript to do threading/async? I had a search, and the results were deferred/promise which seems very abstract at the moment.

解决方案

Try processing retrieved data incrementally.

At piece below , elements generated in blocks of 250 , primarily utilizing jQuery deferred.notify() and deferred.progress().

When all 10,000 items processed , the deferred object is resolved with the collection of 10,000 elements. The elements are then added to document at single call to .html() within deferred.then()'s .done() callback ; .fail() callback cast as null .

Alternatively , could append elements to the document in blocks of 250 , within deferred.progress callback ; instead of at the single call within deferred.done , which occurs upon completion of the entire task.

setTimeout is utilized to prevent "freeze the web browser" condition .

$(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/

这篇关于jQuery的 - 可以在线程/异步做些什么呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！