Javascript 异步xhr和回调

我在等待DOM元素存在时遇到了一个问题

首先，我对我的后端进行了一次XHR，并从中获得一些信息：

$(document).ready(function() {
    var searchParam, searchStr;
    // some values to vars

    loadTags(15,highlightAndSearchTags(searchParam,searchStr));
});

功能如下：

function highlightAndSearchTags(searchParam, searchStr) {
    if (searchParam == 'tags') {
        var selectedTags = searchStr.split(',');
        console.log($("#my_favorite_latin_words").children().length); // sometimes returns 0, sometimes returns number of <span> in the div (see loadTags())
        for (var i = 0; i < selectedTags.length; i++) {
            $("#" + selectedTags[i]).toggleClass("tag-selected");
        }
    }
}

function loadTags(showedTagsLength, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', apiUrl + "tags/", true);
    xhr.withCredentials = true;
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status != 200) {
                console.log(xhr.responseText);
            }
            else {
                tagList = JSON.parse(xhr.responseText);
                tagList = tagList.results;

                for (var i = 0; i < showedTagsLength; i++) {
                    $("#my_favorite_latin_words").append("<span id=\'" + tagList[i].tag_pk + "\'>" + tagList[i].name + "</span>");
                }

            }
            setTimeout(callback, 1); //found this trick somewhere on stackoverflow
        }
    };
    xhr.send();
}

到目前为止没有运气

在这种情况下，有人能建议如何正确等待元素吗

loadTags(15,highlightAndSearchTags(searchParam,searchStr));

此代码将立即执行函数

highlightAndSearchTags

，结果值将被发送，而不是回调。如果要将其用作回调，只需传递函数名，如下所示：

loadTags(15, highlightAndSearchTags);

如果需要传递

searchParam

和

searchStr

参数，请将它们添加为参数：

loadTags(15, highlightAndSearchTags, searchParam, searchStr);

加载标记后，您可以使用添加到

loadTags

函数中的

searchParam

和

searchStr

参数直接调用回调：

function loadTags(showedTagsLength, callback, searchParam, searchStr) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', apiUrl + "tags/", true);
    xhr.withCredentials = true;
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status != 200) {
                console.log(xhr.responseText);
            }
            else {
                tagList = JSON.parse(xhr.responseText);
                tagList = tagList.results;

                for (var i = 0; i < showedTagsLength; i++) {
                    $("#my_favorite_latin_words").append("<span id=\'" + tagList[i].tag_pk + "\'>" + tagList[i].name + "</span>");
                }

            }

            callback(searchParam,searchStr);
        }
    };
    xhr.send();
}

---

正如前面提到的多条注释一样，您必须将其包装到一个函数中，以便在调用loadTags函数时不会调用它，因为您没有传递任何回调函数。您将立即调用函数并传递未定义的

highlightAndSearchTags

函数的返回值

匿名函数可以作为

  loadTags(15,function(){ 
      highlightAndSearchTags(searchParam,searchStr)
  });

---

loadTags（15，highlight和searchtags（searchParam，searchStr））

->这会立即调用

Highlight和SearchTags（searchParam，searchStr）

，并将其返回值（

未定义

）传递给

loadTags

，因为

回调

设置超时“技巧”是不必要的-您的问题正如@Andreas指出的那样。。。do

loadTags（15，function（）{highlightAndSearchTags（searchParam，searchStr）；}）

instead为什么要将回调的参数作为参数添加到应该执行回调的函数中？O.oI描述了两种方法，将它们添加为参数或将回调包装到一个自动执行的匿名函数中。

loadTags(15, function() { highlightAndSearchTags(searchParam, searchStr); });

 loadTags(15,function(searchParam,searchStr){highlightAndSearchTags(searchParam,searchStr)});

  loadTags(15,function(){ 
      highlightAndSearchTags(searchParam,searchStr)
  });