异步 Javascript 和 promise-解网

问：

我仍然是 JavaScript 的新手，还没有做过任何 Web 开发方面的实习或正式工作。

HTML 有 3 个单选按钮，h4 标签用于根据单选按钮选择显示一些文本/结果。

HTML格式：

<p>The 3 sages of the apocalypse</p>
<input id="cat" type="radio" name="3sages">
<label >Luceila of the South</label><br>
<input id="fav" type="radio" name="3sages">
<label >Isley of the North</label><br>
<input id="split" type="radio" name="3sages">
<label >Riful of the west</label><br>
    
<h4 id="display"></h4>

实验室要求是这样的，我必须使用 promise，当 promise 对象被拒绝时，必须进行不同的函数调用。Promise 很难理解，因为我上周用谷歌搜索了 2 个小时，无法理解。.then 有什么用途？它是否使用 promise 对象？

JavaScript（不起作用）：

$('input[type=radio][name=3sages]').change(function()
{
    function wrong()
    {
        const write = document.getElementById("display");
        write.innerHTML = "Wrong";
    }

    function correct()
    {
        const write = document.getElementById("display");
        write.innerHTML = "He is my favorite";
    }

    let guarantee = new Promise(function(resolve,reject) {
        if ($('#fav').is(':checked'))
        {
            resolve(correct());
        }
        else
        {
            reject(wrong());
        }
    });

    guarantee.then( 
        function() 
        {
            correct();
        },
        function() 
        {
            wrong();
        }
    );
});

JavaScript jQuery 异步 Promise 客户端

$('input[type=radio][name=3sages]').change(function()
{
    function wrong()
    {
        const write = document.getElementById("display");
        write.innerHTML = "Wrong";
    }

    function correct()
    {
        const write = document.getElementById("display");
        write.innerHTML = "He is my favorite";
    }

    let guarantee = new Promise(function(resolve,reject) {
        if ($('#fav').is(':checked'))
        {
            resolve(correct());
        }
        else
        {
            reject(wrong());
        }
    });

    guarantee.then( 
        function() 
        {
            correct();
        },
        function() 
        {
            wrong();
        }
    );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>The 3 sages of the apocalypse</p>
<input id="cat" type="radio" name="3sages">
<label >Luceila of the South</label><br>
<input id="fav" type="radio" name="3sages">
<label >Isley of the North</label><br>
<input id="split" type="radio" name="3sages">
<label >Riful of the west</label><br>
    
<h4 id="display"></h4>

我必须使用承诺

老实说，在没有异步行为的情况下使用承诺是没有意义的。在代码中，承诺是在所有需要的信息都可用时创建的，并且没有异步等待。

如果这确实是预期的练习，那就这样吧，但如果你想寻找真正异步的东西，那么就要等待用户的输入。该部分是异步的 -- 您事先不知道用户何时会单击该单选按钮。这就是可以使用承诺的地方。这归结为对 jQuery 方法（或更一般地说，它的方法）的 promise 化。由于 promise 是关于捕获一个事件，并且事件侦听器会在每个重复事件上触发，因此您只需要侦听一个事件（使用 jQuery 的方法），然后在触发时为下一个事件的发生创建一个新 promise。.click.on.one

这是它的样子：

// Generic function to get a promise of a certain event on a selected element
function promiseEvent(selector, event) {
    return new Promise(resolve => $(selector).one(event, resolve));
}

// Specific function to get a promise for the user selecting an answer
function promiseAnswer() {
    return promiseEvent('input[type=radio][name=3sages]', 'change');
}

// Create the promise and listen for when it resolves
promiseAnswer().then(processChoice);

function processChoice() {
    // React to the user's choice
    $("#display").text(
        $('#fav').is(':checked') ? "He is my favorite" : "Wrong"
    );
    // Create the promise again and listen when it resolves
    promiseAnswer().then(processChoice);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>The 3 sages of the apocalypse</p>
<input id="cat" type="radio" name="3sages">
<label >Luceila of the South</label><br>
<input id="fav" type="radio" name="3sages">
<label >Isley of the North</label><br>
<input id="split" type="radio" name="3sages">
<label >Riful of the west</label><br>
    
<h4 id="display"></h4>

异步 Javascript 和 promise

Asynchronous Javascript and promises

评论

评论