Javascript函数事件未按顺序触发

我有一个函数，用于在用一组新的子项重新填充所述div之前，清除该div中具有特定名称的所有子项

function displaySearchResults(resultsList) {
var length = resultsList.length;
var searchDiv = document.getElementById('search-results');

//CLEAR DIV
if(searchDiv.hasChildNodes()) {
    for(var i=0; i<searchDiv.childNodes.length; i++) {
        var oldChild = searchDiv.childNodes[i];
        if(oldChild.id.indexOf('search-results-row') != -1) {
            searchDiv.removeChild(oldChild);
            console.log('Removed Result!');
        }
    }
}

//ADD CHILDREN  
for(var i=0; i<length; i++) {
    console.log('Added Result!');
    var element = resultsList[i];
    var rowDiv = document.createElement('div');
    rowDiv.id = 'search-results-row' + i;
    rowDiv.className = 'list listRow' + i%2;
    rowDiv.setAttribute('onclick', 'mapCurrentContact(' + i + ');');
    rowDiv.innerHTML = element.firstName + ' ' + element.lastName;
    searchDiv.appendChild(rowDiv);
}
}

函数显示搜索结果（结果列表）{
var length=resultsList.length；
var searchDiv=document.getElementById（'search-results'）；
//净空DIV
if（searchDiv.hasChildNodes（））{
对于（var i=0；i从末端移除时：

for(var i=searchDiv.childNodes.length; i>=0; i--) {
...

您当前的for循环将失败。它本身也不是异步的。异步调用可以如下所示：

// this will be called first
$.ajax({
  url: 'getsomedata.php',
  success: function() {
    // this will not be called until the getsomedata.php has completed
    // and the for loop below might already be finished.
  }
});

// this directly after the ajax call
for (var i=0; i<10; i00) {
....

//这将首先被调用
$.ajax({
url:'getsomedata.php'，
成功：函数（）{
//在getsomedata.php完成之前，不会调用此函数
//下面的for循环可能已经完成。
}
});
//这将直接在ajax调用之后执行
对于（var i=0；i当您从列表的开头删除项目时：

V
a b c d //Initial list with the counter being 0, pointing to 'a'

V
b c d   //Removed the element 'a'

  V
b c d   //Incremented the counter by one

您最终跳过元素
b
，并对列表中的其他每个元素重复相同的错误。您可以在删除某个元素时减小计数器，也可以从列表的末尾开始，在这种情况下，您只会影响已查看的元素的索引。后者更为广泛接受

var i; //JavaScript does not have block scope, only function scope.  Just declare it once here and initialize it at the beginning of each loop.
for(i=searchDiv.childNodes.length-1; i>=0; i++) {

在这里，我对您的代码进行了一些重构：

function displaySearchResults( results ) {
    var elem = document.getElementById( 'search-results' );

    [].slice.call( elem.children ).forEach( function ( child ) {
        if ( child.id.indexOf( 'search-results-row' ) > -1 ) {
            elem.removeChild( child );
        }
    });

    results.forEach( function ( result, i ) {
        var child = document.createElement( 'div' );
        child.id = 'search-results-row' + i;
        child.className = 'list listRow' + ( i % 2 );
        child.onclick = function () { mapCurrentContact( i ); };
        child.textContent = result.firstName + ' ' + result.lastName;       
        elem.appendChild( child );
    });
}

另外，我建议对单击行为进行事件委派。只需在
搜索结果
DIV上绑定一个单击处理程序，并使用事件对象确定单击了哪个子元素

顺便说一句，有CSS选择器来匹配偶数/奇数子元素。例如：

#search-results > :nth-child(even) { ... }
#search-results > :nth-child(odd) { ... }

因此，实际上，您不需要
listRow0
和
listRow1
类

<> >实况演示： < /P>我不知道这是不是你的问题，但是在明确的div块中，考虑向下循环，而不是向上。当子节点被移除时，SaleVdiv.CaleNoad变量的长度会发生变化。“我知道JavaScript异步运行”是什么意思？？另外，请注意变量
i
在该函数中只存在一次，而不是在每个
for
循环中都存在一次：这没有关系，但它确实会让人反感。正如Jeffrey所指出的，您跳过了子节点。我想我需要一点澄清。我不知道如何跳过节点，以及i如何随着循环进行…我没有意识到for循环在最初被调用后发生了更改。谢谢。您不应该更改原始问题中的代码。如果将来有人遇到类似问题，他们可以查看您的原始代码并查看公认的答案以了解如何修复。@Ryand如果
for
循环没有更改，您正在使用用于访问收缩集合中的项的索引。