jQuery不能在主范围内使用变量[重复]答案

【问题标题】：jQuery cant use variable in main scope [duplicate]jQuery不能在主范围内使用变量[重复]
【发布时间】：2013-05-27 23:27:50
【问题描述】：

我有 user_permissions 变量，我定义了它供全局使用，在 post 方法上设置后我没有打印问题，但是在下面的多行中使用此变量后，我得到 null 结果？？？

jQuery（最少的代码）：

var user_permissions = null;
    $(document).ready(function(e) {
                $.post('model/controller.php' ,{ username:iId_username , postaction:'getUserPermission' }, 
                        function(data){
                            user_permissions=0;
                            user_permissions = data.user_permissions;
                            console.log(user_permissions); // RESULT is : {"user_permissions":"8"}
                },'json');
                $.each(listPermissions, function(i, item) {
                        if ( user_permissions == listPermissions[i].id ) selected = "selected='selected'"; else selected = '';
                        console.log(user_permissions); // RESULT is : null
                        selectElement += "<option value='" + listPermissions[i].id + "' "+ selected + ">" + listPermissions[i].permission_title + "</option>";
                });

});

我的代码有什么问题？

【问题讨论】：

你还没有理解JavaScript中异步脚本执行的工作原理。

标签： jquery

【解决方案1】：

那是因为.post() 是异步的，并且您的.each() 在您的帖子完成之前就已执行，

你需要在post回调中移动.each()

$.post('model/controller.php', {
    username: iId_username,
    postaction: 'getUserPermission'
},

function (data) {
    user_permissions = 0;
    user_permissions = data.user_permissions;
    console.log(user_permissions); // RESULT is : {"user_permissions":"8"}
    $.each(listPermissions, function (i, item) {
        if (user_permissions == listPermissions[i].id) selected = "selected='selected'";
        else selected = '';
        console.log(user_permissions); // RESULT is : null
        selectElement += "<option value='" + listPermissions[i].id + "' " + selected + ">" + listPermissions[i].permission_title + "</option>";
    });
}, 'json');

【讨论】：

【解决方案2】：

$.each 部分中的代码在 $.post 调用完成之前执行。

Javascript 是异步的，因此它会继续执行代码，而无需等待前一件事完成。

您可以尝试 $.when 之类的方法，以确保在继续之前已完成某项操作，或者将其放入回调函数中等待您等待的任何内容。

【讨论】：

【解决方案3】：

更改为以下代码后，我的select 元素无法填充，但我可以在控制台中打印。

selectElement = "<select style='width:100%;'>";
$.post('model/controller.php', {
    username: iId_username,
    postaction: 'getUserPermission'
},
function (data) {
    user_permissions = 0;
    user_permissions = data.user_permissions;
    //    selectElement = "<select style='width:100%;'>";
    $.each(listPermissions, function (i, item) {
        if (user_permissions == listPermissions[i].id) selected = "selected='selected'"; else selected = '';
        selectElement += "<option value='" + listPermissions[i].id + "' " + selected + ">" + listPermissions[i].permission_title + "</option>";
    });
    //    selectElement += "</select>";
    //    $('td :eq(5)',this).html(selectElement);
}, 'json');
selectElement += "</select>";
$('td :eq(5)',this).html(selectElement);

【讨论】：