jquery 1.10 $.ajax 和 $.each 调用完成（phonegap）答案

【问题标题】：jquery 1.10 $.ajax with $.each call to finish (phonegap)jquery 1.10 $.ajax 和 $.each 调用完成（phonegap）
【发布时间】：2013-07-01 16:49:37
【问题描述】：

我在 jquery 中的 ajax 调用出现问题，并在 100% 完成处理之前一直显示加载图标。

我将它与 phonegap 和数据库一起使用，以便从 ajax 中提取的项目被加载到数据库中。代码运行良好，数据库 100% 填充，但我的“#block-ui”在数据库 $.each 调用 100% 完成之前消失了。我的#sync 文本也以随机顺序显示。

由于我使用的是 jquery 1.10，我知道 async: false 不再有效。有人可以帮忙吗？

function SyncIt() {
    $('#recap').text('');
    $('#syncit').attr("href", "#");
    var db = window.openDatabase("titanware", "1.0", "TitanRoof", 50000000);
    $('#block-ui').show();
    $('#sync').text('Syncing with Titanware');
    db.transaction(function(tx) {tx.executeSql('DELETE FROM active_jobs WHERE jb_active != 1');},dbErrorHandler);
    db.transaction(function(tx) {tx.executeSql('DELETE FROM employees');},dbErrorHandler);

// Sync Jobs    
    $.ajax({
    type: 'GET',
    url: 'http://xxxxxxxxx/api/api.php?request_type=m_clients',
    crossDomain: true,
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp",
    cache: false,
    success: function(data) {
    $('#sync').text('Syncing Jobs');
    }
    }).done(function(data) {

    $.each(data, function (i, item) {
    // Load Data into the database for jobs        
    db.transaction(function(tx) {tx.executeSql("insert into active_jobs(job_no, comp_name, comp_street, comp_suite, comp_city, comp_state, comp_zip, comp_contact, comp_phone, comp_cell, comp_notes, jb_active) values(?,?,?,?,?,?,?,?,?,?,?,?)", [item.job_no,item.comp_name,item.comp_street,item.comp_suite,item.comp_city,item.comp_state,item.comp_zip,item.comp_contact,item.comp_phone,item.comp_cell,item.comp_notes,'0']);},dbErrorHandler);

    })

    db.transaction(function(tx){
    tx.executeSql('SELECT * FROM active_jobs', [], function(tx, results) {
    var len = results.rows.length;
    // Show total jobs synced in the #recap div
    $('#recap').text('Jobs Synced: ' + len);
    });
    });

    });

// Sync Employees   
    $.ajax({
    type: 'GET',
    url: 'http://xxxxxxx/api/api.php?request_type=get_employees',
    crossDomain: true,
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp",
    cache: false,
    success: function(data) {
    $('#sync').text('Syncing Employees');
    }
    }).done(function(data) { 
    $.each(data, function (i, item) {
    //Load employees in the database  
    db.transaction(function(tx) {tx.executeSql("insert into employees(user_id, full_name) values(?,?)", [item.user_id,item.full_name]);},dbErrorHandler);

    })

    $('#sync').text('Almost Done'); 
    $('#block-ui').hide();

    });

}

感谢您的反馈

【问题讨论】：

标签： jquery ajax cordova each

【解决方案1】：

在您的 $.ajax 通话中添加 async:false。

默认为true，所以请求是异步发送的。

更多详情请参考jQuery.ajax() documentation。

希望对您有所帮助。

【讨论】：

async:false 标志在 Jquery 1.10 中不再起作用。它在 1.8 中贬值。我在代码中有它，但后来发现 1.8 贬值了代码。在使用最新的 jquery 构建时寻找使代码工作的想法。
然后你将不得不应用你自己的逻辑，比如设置一些标志。正如文档所说，使用jqXHR.done()
这就是我迷路的地方。我尝试的一切都会破坏 ajax 调用或数据库循环。还在学习jquery，所以我想我会继续努力。

【解决方案2】：

我通过将隐藏#block-ui 移动到作业插入循环的末尾来解决这个问题。这会在屏幕上保持同步图标，直到该部分 ajax 循环完成。

【讨论】：

好你想通了。 :) 更好地编辑您的答案并发布工作代码。有一天它可能会对某人有所帮助。