0

我在编写一些 Javascript 时遇到了一些麻烦。代码的目的如下：

  1. 从提供的 .TXT 文件中读取 SKU 列表
  2. 在每一行拆分数据
  3. 对于每个对象，在提供的 JSON api 上进行查找以获取有关 SKU 的信息
  4. 将此信息输出到 HTML 表中。

目前，我可以按预期工作，但是，它似乎不会阻止我尝试在for循环后运行的任何其他 Javascript。

这是我的代码示例

<script type="text/javascript">

//Set API Address


var api = "/api/AthenaService.svc/GetProductBySku/";


//Get Array of SKUs from TXT file

$.get('/Views/Locale/promoPages/LandingPages/TradeList/TradeList.txt',function(data){

//Split File into lines
var line = data.split('\n');


for(i=0;i<line.length;i++)
{

$.getJSON(api + line[i] , function(data1) {
    // Request complete, NOW we can use the data we got!
    $('.tListBody').append('<tr><td>' + data1.Title + '</td><td align="center">' + data1.Platform.Button + '</td></tr>'); 
    });


};
});



$(document).ready(function() {
$('#searchLoading').fadeOut('slow');
$('#showForm').fadeIn('slow');

$('input#tradeSearch').blur(function() {
$('input#tradeSearch').quicksearch('table#Searchable tbody tr');
});

});
</script>

我遇到的问题是，document ready 中的所有内容似乎都不起作用。

我已经更新了上面的代码以反映下面的建议修复。似乎代码运行良好，但是我的快速搜索 jQuery 插件似乎没有触发。我想知道这是否与它应该搜索的 TR 元素是新创建的 DOM 元素有关？

任何帮助将不胜感激。

更新：

问题已经解决了！稍微阅读一下 Quicksearch.js 插件的文档，我发现可以在我的循环中手动将条目添加到快速搜索缓存中。这解决了这个问题。

下面更新了代码；

$(document).ready(function () {

    var api = "/api/AthenaService.svc/GetProductBySku/";

    //Get Array of SKUs from TXT file

    $.get('/Views/Locale/promoPages/LandingPages/TradeList/TradeList.txt', function (data) {

        //Split File into lines
        var line = data.split('\n');

        var qs = $('input#tradeSearch').quicksearch('.TheList tbody tr');

        for (i = 0; i < line.length; i++) {

            $.getJSON(api + line[i], function (data1) {
                // Request complete, NOW we can use the data we got!
                $('.tListBody').append('<tr><td>' + data1.Title + '</td><td align="center">' + data1.Platform.Button + '</td></tr>');
                qs.cache();

            });


        };

    });

});

感谢大家的帮助和建议

4

2 回答 2

0

我知道有什么问题。您正在 for 循环中进行 ajax 调用，并且您期望 for 循环等到 ajax 完成。正确的？？

for(i=0;i<line.length;i++)
{

$.getJSON(api + line[i] , function(data1) {
    // Request complete, NOW we can use the data we got!
    $('.tListBody').append('<tr><td>' + data1.Title + '</td><td align="center">' + data1.Platform.Button + '</td></tr>'); 
    });


};

ajax 调用是异步的。所以$.getJSON(将调用服务器，并且不会在 for 循环中等待它完成。一旦它进行 ajax 调用，它将循环通过 for 循环。这会给你带来好像 for loop not blocking the code next to it.......但实际上for loop is completing更快的效果，只需发出 ajax 请求，然后执行下一个代码。

于 2013-04-25T11:25:55.170 回答
0

检查控制台中的错误，如果出现问题，它将暂停脚本，阻止后面的代码运行。

此外，您似乎在那里发出了很多 HTTP 请求（文件中的每行一个），这可能很慢。

在准备好之前将内容附加到 DOM 也会给您带来问题。我会将所有代码移到$(document).ready(function() { });

于 2013-04-25T09:04:42.850 回答