javascript - 刷新列表后重新选择 中的项目

Question

我相信我的问题可能与函数刷新列表所需的时间有关，但是两天尝试了十几个不同的谷歌搜索可以找到的所有内容让我陷入困境......

我正在动态创建一个列表:

<ul id="events" class="select" name="events" style="width:40vw;"></ul>

LoadEvents()
{
    var xhttp;
    var EventList;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        if (this.readyState == 4 && this.status == 200)
        {
            EventList =  this.responseText.split(",");
            //Clear List
            $('#events').empty();
            EventList.forEach(function(item, index, array) 
            {
                if(item !== "")
                {
                    $ID = item.split(";")[0];
                    $('#events').append('<li class="event" id=\"' + $ID '\">' + item.split(";")[1] + '</li>');
                }
            });  
        }
    };
    xhttp.open("GET", "DataLink2.php?con=GetFullEvents&orderby=" + $OrderBy, true);
    xhttp.send();
}

EventList 是从数据库中提取的字符串“ID;EventName”数组。

提取我正在使用的 ID:

var selectedid;
//Within the function that requests the refresh I do
selectedid = $('#events').find('li.selected').attr('id');
//calling the refresh function
LoadEvents();
//And trying to reselect the item in the list
$('#' + selectedid).click();

在fiddle上它工作得很好，但实际上它总是在刷新列表之前选择该项目!

我在这里尝试了类似问题的各种想法，包括:

$.when(LoadEvents()).then($('#' + selectedid).click());

我还尝试将 $('#' + selectedid).click(); 放入函数中。

然后我尝试了提供的前两个解决方案 on this question (还没有完全弄清楚如何使用“myCustomevent”执行第三个选项)但在每种情况下 $('#' + selectedid).click(); 都是在 li 之前执行的重新生成。

有没有办法强制一个事件等待另一个事件完全完成？

php:

$connect = mysqli_connect($host_name, $user_name, $password, $database);

if(mysqli_connect_errno())
{
    $query = "SELECT * FROM `Events` WHERE `FinishTime` > '00:00:00' ORDER BY `FinishTime` DESC";
    //Query Result
    if ($result = mysqli_query($connect, $query)) 
    {
        /* fetch associative array */
        while ($obj = mysqli_fetch_object($result)) 
            {
            printf ("%s,", $obj->ID.";".$obj->EventName;
            }
            /* free result set */
            mysqli_free_result($result);
    }
    else
    {
        echo '<p>Connection failed.</p>';
    }
}

Answer 1

我相信您正在进行异步调用以从数据库检索事件。它立即返回(即使响应尚未加载)并将控制权传递给选择逻辑。

您可以尝试将选择逻辑放入响应回调中:

LoadEvents(preselect)
    {
        if (typeof preselect === 'undefined') {
            preselect = false;
        }

        var xhttp;
        var EventList;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function()
        {
            if (this.readyState == 4 && this.status == 200)
            {
                EventList =  this.responseText.split(",");
                //Clear List
                $('#events').empty();
                EventList.forEach(function(item, index, array)
                {
                    if(item !== "")
                    {
                        $ID = item.split(";")[0];
                        $('#events').append('<li class="event" id=\"' + $ID '\">' + item.split(";")[1] + '</li>');
                    }
                });

                if (preselect) {
                    //And trying to reselect the item in the list
                    $('#' + selectedid).click();
                }
            }
        };
        xhttp.open("GET", "DataLink2.php?con=GetFullEvents&orderby=" + $OrderBy, true);
        xhttp.send();
    }

希望对您有所帮助!