javascript - 关于变更事件的 promise

Question

我正在尝试了解 Promise API 的工作原理。目前，我的想法是按下/单击开关按钮来记录一些消息或执行一些 AJAX，具体取决于情况。这是链接的完美示例。不幸的是，then 无法按预期工作，它会在页面加载时记录消息，而不是在 change 事件

const userID = $(".options").data('id');
let isEnabled = $("#statusToggler").data('status');

function showStatus() {
    if(isEnabled) {
        $('#statusToggler').bootstrapToggle('on', true);
    } else {
        $('#statusToggler').bootstrapToggle('off', true);
    }
}

async function toggleStatus() {
    return new Promise(function (resolve, reject) {
        resolve(function () {
            $("#statusToggler").on('change', function () {
                let status = $("#statusToggler").prop('checked');
                if (status === true) {
                    $("#statusToggler").data('status', 1);
                    $('#statusToggler').bootstrapToggle('on', true);
                } else {
                    $("#statusToggler").data('status', 0);
                    $('#statusToggler').bootstrapToggle('off', true);
                }
            })
        });
    });
}

async function ajaxModifyStatus() {
    await toggleStatus()
        .then(function () {
            console.log("Do something when toggle is pressed/clicked");
        });
}

showStatus();
ajaxModifyStatus();

Answer 1

第一次扫描时，您的 Promise 语法看起来不错。这两个函数都在脚本的底部调用，这就是它们在页面加载时运行的原因。

如果您想让它们在事件上运行，您需要为事件提供函数，就像它是像 ajaxModifyStatus 这样的参数，而不是 ajaxModifyStatus()。

抱歉，我已经很久没有使用过 jQuery，所以不记得如何编写它。下面是你可以如何使用普通的 js...

let element = document.getElementById('myid')

element.addEventListener('change', ajaxModifyStatus)
// Or...
element.addEventListener('change', async() => {
  let result
  try {
    result = await ajaxModifyStatus()
  } catch (err) {
    console.log(err)
  }
  // Do something with result...
})

正如前面的评论提到的，除非您确实想要 Ajax 函数的结果，否则您不一定需要 Promise 才能工作。

注意我实际上将其编写为异步等待语法，因为它在我的手机上更容易。如果您想这样做，只需用 Promise 替换该代码即可。