使用jQuery getJSON并在处理完结果后激发一个函数..应该有效..但是没有't

Using jQuery getJSON and fire a function AFTER the results have been processed... should work... but doesn't

本文关键字：有效 一个 函数 处理 getJSON jQuery 结果 使用      更新时间：2023-09-26

我有一系列函数，它们填充了一系列下拉框。

这是一个产品数据页，用于添加新项目或编辑现有项目。在后一种情况下，一旦填充了所有下拉框，它就会从数据库中获取一个项目数据作为JSON字符串，并使用$('#elem').val('value') 在下拉框中选择适当的值

这一切都很好，只是我不能把它按正确的顺序进行。

1.  function loadBrands() {
2.     $('#brand').empty().append('<option value="">Select...</option>').addClass('centreLoader');
3.     $.getJSON('/jsonData/brands.txt', function (data) {
4.         $.each(data, function (i, item) {
5.             $('#brand').append('<option value="' + data[i].label + '">' + data[i].brandName+ '</option>');
6.         });
7.         $('#brand').removeClass('centreLoader');
8.         loadSavedItem(); 
9.     });
10. };

我添加了行号来简单解释（尽管你们都知道这是什么！）

第3行从我的文件中获取JSON数据（这是有效的数据，因为它填充得很好），然后第4行开始循环返回的数据并填充下拉列表。

第8行是出错的地方，这调用了函数loadSavedItem，看起来有点像：

1.  function loadSavedItem(thisItemId) {
2.     $.getJSON('/jsonData/QUERY_DB_FOR_THIS_PRODUCT (thisItemId)', function (data) {
3.         $('#brand').val(data[0].brand);
4.     });
5.  };

同样，非常简单的是，第2行获得JSON输出（这也是有效的，它很好地填充了其他字段），并根据需要设置字段值（这显然是代码的缩短版本）

问题似乎是loadSavedItem()在#brands完全填充之前被调用得太早，因此它无法正确设置值。如果我加上一个时间延迟，那么它就起作用了。

但是。。。我认为$(each...jQuery语句之后的任何事情都不应该在$(each)完成之前发生？

我如何才能确保情况确实如此？

根据我的经验，$（each）可以在脚本的其余部分运行时循环，如果这有意义的话（至少在Chrome中）。也许这与"优化"有关。

我以前已经通过检查data.length解决了这个问题，设置了一个递增1的计数器，然后在计数器等于长度时触发代码。

function loadBrands() {
    $('#brand').empty().append('<option value="">Select...</option>').addClass('centreLoader');
    $.getJSON('/jsonData/brands.txt', function (data) {
        var dataNum = data.length;
        var counter = 1;
        $.each(data, function (i, item) {
            $('#brand').append('<option value="' + data[i].label + '">' + data[i].brandName+ '</option>');
            if (dataNum == counter) {
                $('#brand').removeClass('centreLoader');
                loadSavedItem(); 
            }
            counter ++;
        });
    });
}

我的建议是在Success函数中添加方法"loadSavedItem（）"，如下所示。这应该能解决问题。

$.ajax({   
   url: url,   
   dataType: 'json',   
   async: true,   
   data: myData,   
   success: function(data) {     // loadSavedItem();   } 
});

希望这有帮助！！

我相信线索是jQuery.ajax()的async设置。http://api.jquery.com/jQuery.ajax/

相关文章：