JavaScript中有什么方法可以避免使用setTimeout來立即執行一個函數？ 也許使用jQuery？

Question

我正在使用此代碼：

$newFilter = getNewFilter();

$fieldDropdown = getFieldDropdown(fieldData.field);
$newFilter.append($fieldDropdown);

$typeDropdown = getTypeDropdown($fieldDropdown.data('zenfilter').fieldId, $fieldDropdown.val(), fieldData.type);
$newFilter.append($typeDropdown);

$inputBox = getInputBox($typeDropdown.data('zenfilter').fieldId, $typeDropdown.data('zenfilter').fieldType, $typeDropdown.val(), fieldData.value);
$newFilter.append($inputBox);

我在第四行（ $typeDropdown = getTypeDropdown... ）收到錯誤（ $fieldDropdown.data("zenfilter") is null ）。 這是因為getFieldDropdown尚未完成執行。 如何線性調用函數？ 非常感謝。

編輯：添加了getFieldDropdown函數：

getFieldDropdown = function (populateData) {
    var $hiddenInput, i, $obj;

    $hiddenInput = $('<input>', {
        name: defaults.paramName + '[' + nFilters + '][field]',
        type: 'hidden'
    });
    $obj = $('<select></select>', {
        'class': classesHash.individualField,
        name: defaults.paramName + '[' + nFilters + '][fakefield]'
    }).
    data('zenfilter', { fieldId: nFilters }).
    addOption(fieldOptions).
    sortOptions(true).
    selectOptions('').
    change(function(){
        $(this).nextAll('select, div.' + classesHash.individualInputContainer).detach();
        $(this).removeClass(classesHash.incompleteField).after(getTypeDropdown($(this).data('zenfilter').fieldId, $(this).val()));
        $(this).prev('input[type=hidden]').val(defaults.data[$(this).val()].fieldname);
    });
    if (populateData) {
        for (i = 0; i < defaults.data.length; i += 1) {
            if (defaults.data[i].fieldname === populateData) {
                $obj.selectOptions(String(i));
            }
        }
    }

    return $hiddenInput.add($obj);
};

（addOptions，sortOptions和selectOptions只是插件的方法，可以更輕松地操縱選擇，它們不執行任何AJAX）

Answer 1

我假設getFieldDropdown是從您的問題進行的異步調用（對該函數的定義將使該問題更易於回答）。

JavaScript確實以單線程方式執行； 您的問題不是getFieldDropdown尚未完成，而是它啟動了異步調用然后返回。 如果要處理異步調用的結果，則必須為該調用提供回調：一個在完成后要執行的函數。

假設回調是getFieldDropdown的第二個（當前未提供）參數，您將執行以下操作：

$fieldDropdown = getFieldDropdown(fieldData.field, function(){
    $newFilter.append($fieldDropdown);

    $typeDropdown = getTypeDropdown($fieldDropdown.data('zenfilter').fieldId,$fieldDropdown.val(), fieldData.type);
    $newFilter.append($typeDropdown);

    $inputBox = getInputBox($typeDropdown.data('zenfilter').fieldId,$typeDropdown.data('zenfilter').fieldType, $typeDropdown.val(), fieldData.value);
    $newFilter.append($inputBox);
});

這樣一來，您就可以將依賴於異步調用結果的內容的執行推遲到那里為止。

Answer 2

這些功能被同步調用。 最有可能發生的事情是getFieldDropdown(fieldData.field)返回null，或者它返回的對象內部沒有定義zenfilter屬性。

Answer 3

為此，您將需要編輯getFieldDropdown。 與其讓它串行執行，不如重新設計它，使其可以接受在執行完成時運行的回調方法。 這是jQuery的標准方法：

fieldDropdown = getFieldDropdown(fieldData.field, function () {

  $newFilter.append($fieldDropdown);

  $typeDropdown = getTypeDropdown($fieldDropdown.data('zenfilter').fieldId,   $fieldDropdown.val(), fieldData.type);
  $newFilter.append($typeDropdown);

  $inputBox = getInputBox($typeDropdown.data('zenfilter').fieldId,   $typeDropdown.data('zenfilter').fieldType, $typeDropdown.val(), fieldData.value);
  $newFilter.append($inputBox);

}
);