javascript - 如何异步填充选择控件？

问题描述

我正在做一个项目，该项目涉及一个顶部有一个静态选项的选择，从数据库中提取的一些选项，以及底部的一个静态选项。当我尝试实现这一点时，我最终将两个静态选项放在顶部，然后是它们下方的所有数据库选项。

我查看了 Stack Overflow，看起来我应该使用 Promise。我不熟悉 Promise 的概念，所以我阅读了各种示例并查看了一些记录 Promise、它们是什么以及如何实现它们的网站，并尝试相应地调整我的项目，但是我似乎无法获得我想要的结构。

为了采取一种非常简化的方法，我设置了一个非常基本的网页，其中包含一个空选择以及一个按钮，该按钮的 onclick 操作是用三个选项填充选择，其文本值为 1、2 和 3。如果我的填充（ ) 方法只是创建三个选项并以正确的顺序添加它们，选择列表以正确的顺序显示它们。如果我使用 setTimeout 导致添加“2”时出现延迟，那么正如预期的那样，顺序是 1、3、2。我尝试在“2”上使用 Promise，但是仍然按照以下顺序填充选择1、3、2。

Javascript：

var select = document.getElementById('numbers');

function populate() {
    putOne();
    putTwo().then(putThree);
}

function putOne() {
    var one = document.createElement('option');
    one.text = 1;
    select.add(one);
}

function putTwo() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            var two = document.createElement('option');
            two.text = 2;
            select.add(two);
        },1000)
        resolve();
    }) 
}

function putThree() {
    var three = document.createElement('option');
    three.text = 3;
    select.add(three);
}

HTML

<select id="numbers"></select>
<button onclick="populate();">Populate</button>

<script src="promise.js"></script>

我希望生成的选择控件按该顺序显示选项 1、2 和 3。

标签： javascriptasynchronouspromise

在putTwo()你超时之前解决。
如果您将移动resolve()到setTimeout回调中，选项将按照您的预期排序。

function putTwo() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            var two = document.createElement('option');
            two.text = 2;
            select.add(two);
            resolve();
        },1000)
    }) 
}

javascript - 如何异步填充选择控件？

问题描述

解决方案

推荐阅读