異步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();
        }
    );
});

uj5u.com熱心網友回復：

JavaScript（不作業）

實際上您的代碼作業正常（但請繼續閱讀）。確保您包含 jQuery，并且您的腳本在檔案加載后執行 - 所以將您的腳本放在頁面底部。這是您的可運行代碼段中的代碼：

顯示代碼片段

$('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>

我必須使用承諾

老實說，在沒有異步行為的情況下使用 Promise 是沒有意義的。在您的代碼中，promise 是在所有需要的資訊都可用的時刻創建的，并且沒有什么可以異步等待。

如果這確實是預期的練習，那就這樣吧，但是如果您想查看真正異步的東西，那么請等待用戶的輸入。該部分是異步的——您事先不知道用戶何時會單擊該單選按鈕。那就是可以使用promise的地方。這歸結為承諾jQuery.click方法（或更一般地說，它的.on方法）。由于 Promise 是關于捕獲一個事件，并且事件偵聽器會在每個重復事件上觸發，因此您只需要偵聽一個事件（使用 jQuery 的.one方法），然后當它觸發時，為下一個事件發生創建一個新的 Promise。

這是看起來的樣子：

// 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 jQuery 异步 承诺 客户端

上一篇：單擊按鈕后呼叫Web服務時停止單擊EventListener同步行為

下一篇：異步存盤核心資料會破壞關系