異步 Javascript 和承諾

Question

我還是 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 object 被拒絕時，必須進行不同的 function 調用。 Promise 很難理解，因為我上周用谷歌搜索了 2 個小時，無法理解。 那么.then 有什么作用？ 是否使用 promise object？

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

Answer 1

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>