如何异步填充选择控件？

Question

I'm working on a project that involves having a select which has a static option at the top, some options pulled from a database, and a static option at the bottom. When I try to implement this, I instead end up having the two static options at the top, and then all of the database options below them.

I have taken a look through Stack Overflow, and it looks like I should be using a Promise. I'm not familiar with the concept of a Promise, so I've read through various examples and taken a look at a number of websites documenting promises, what they are and how to implement them, and have tried to adapt my project accordingly, however I don't seem to be able to get the structure I want.

To take a really simplified approach, I set up a really basic web page consisting of an empty select along with a button who's onclick action is to populate the select with three options, who's text values are 1, 2 and 3. If my populate() method simply creates three options and adds them in the correct order, the select list displays them in the correct order. If I use setTimeout to cause a delay on adding '2', then as expected, the order is 1, 3, 2. I've attempted to use a Promise on '2', however the select is still populated in the order of 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>

I expect the resulting select control to display the options 1, 2 and 3 in that order.

Answer 1

In putTwo() you are resolving before the time out.
If you move the resolve() into the setTimeout callback the options will be ordered as you expect.

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

Answer 2

You should be resolving within your setTimeout

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

Right now, the promise is resolving being the setTimeout in finished.