jQuery Ajax Race Condition best practice

Question

In a button.click(function(){}); I have the following code:

var userId = $("#user-permission-edit").val();
        var peId = $("#user-permission-entity-list").val();
        var newParentPEId = $("#new-parent-pe").val();
        var newPeName = $("#pe-name-add").val();

        $.ajax({
            type: "POST",
            url: 'AddNewPE',
            data: { 'targetUserId': userId, 'targetPEId': peId, 'newPeParentId': newParentPEId, 'newPeName': newPeName},
            success: function (data) {
                var dataObj = jQuery.parseJSON(data);
                console.log(dataObj);

                if (dataObj.status == "success") {
                    alert("Permissions have been updated.");
                }
                //update user PEs combo

            }
        });

However, I am concerned of a possible race condition of the variables not getting the values in time for the ajax call.

would something like this be safer?

  var userId = $("#user-permission-edit").val();
    var peId = $("#user-permission-entity-list").val();
    var newParentPEId = $("#new-parent-pe").val();
    var newPeName = $("#pe-name-add").val();


    $.when(function() {
         userId = $("#user-permission-edit").val();
         peId = $("#user-permission-entity-list").val();
         newParentPEId = $("#new-parent-pe").val();
         newPeName = $("#pe-name-add").val();

    }).done(function() {
        $.ajax({
            type: "POST",
            url: 'AddNewPE',
            data: { 'targetUserId': userId, 'targetPEId': peId, 'newPeParentId': newParentPEId, 'newPeName': newPeName},
            success: function (data) {
                var dataObj = jQuery.parseJSON(data);
                console.log(dataObj);

                if (dataObj.status == "success") {
                    alert("Permissions have been updated.");
                }
                //update user PEs combo

            }
        });

    });

Is this even necessary?

Answer 1

$('....').val()方法是一个同步调用-在您收到该元素的值之前，您的脚本执行不会超过该行。