如何使用 Promise 在 JS 中实现自定义“确认”提示

Question

This is the base code

$(".add-item").click(function() {
  var flag;
  var ask_about_flag = // some logic ... 
  if (ask_about_flag == true) {
    if (confirm("Add with a flag?") == true) {
      flag = true
    } else {
      flag = false
    }
  } 
  addItem(flag)
})

What I want to do though, is build a robust modal containing specific instructions about how to answer the 'Add with a flag?' question being posed. Within the modal, there will be 2 button elements for 'Yes' vs 'No'. So think of this as a basic modal (using Bootstrap):

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="flag_modal" aria-hidden="true" id="flag_modal">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title serif text-center">
            Add with a flag?
          </h2>
        </div>
        <div class="modal-body">
          <!-- detailed instructions -->
          <button id="yes" class="btn btn-lg">Yes</button>
          <button id="no" class="btn btn-lg">No</button>
        </div>
      </div>
    </div>
</div>

Like the default confirm alert, the UX is that when add-item is clicked, if the not-included logic calculates that ask_about_flag is true, this modal pops up, and the code doesn't proceed to call addItem until user selects either #yes or #no to set the value of the flag.

However, it's also possible that upon add-item click, the not-included logic calculates that ask_about_flag is false, so the modal doesn't show and addItem is called ( flag = null in this case).

Because of this, I think it makes sense for code organizing to keep addItem function call within the add-item click, rather than push it down into the button handlers (to be clear code below would work)

$(".add-item").click(function() {
  var ask_about_flag = // some logic ... 
  if (ask_about_flag == true) {
    $("#flag_modal").show()
  } 
  addItem()
})

$("#yes").click(function() {
  addItem(true)
})

$("#no").click(function() {
  addItem(false)
})

I want to do something instead like:

$(".add-item").click(function() {
  var flag;
  var ask_about_flag = // some logic ... 
  if (ask_about_flag == true) {
    // pop up modal to ask user to set value of flag
  } 
  // wait to execute until value of flag is set, if needed
  addItem(flag)
})

Seems like Promises are the way (let me know if not,), but that's still pretty new to me. so I took a stab with the below. Working up until when I click a yes or no button where I get Uncaught TypeError: promise.resolve is not a function

var promise; // declare so that it's available both from within `add-item` and `button` handlers

$(".add-item").click(function() {
  promise = new Promise(function(resolve, reject) { 
    var ask_about_flag = // some logic ... 
    if (ask_about_flag == true) {
      $("#flag_modal").modal("show")
    } else {
      resolve(null)
    }
  })

  promise.then(function(flag) {
    // flag is the parameter passed to resolve
    addItem(flag)
  })
})

$("#yes").click(function() {
  promise.resolve(true)
})

$("#no").click(function() {
  promise.resolve(false)
})

FIDDLE: https://jsfiddle.net/0g76ce5s/

Answer 1

Example how to implement logic:

    <script>
        function addItem(flag) {
            //--Your logic here when press yer or no, flag var can be true/false
        }
        $(function() {
            $("#yes").click(function() {
                addItem(true);
            });
    
            $("#no").click(function() {
                addItem(false);
            });
        }
    </script>
    <button onClick="$('#flag_modal').show();return false;">Show modal for confirmation</button>

Answer 2

Actually, I prefer your first approach as it is more separation of concerns.

However if you want to do the Promise approach, what you need to pass is the resolve function instead of the Promise.

Example below:

 var resolveGlobal; // declare so that it's available both from within `add-item` and `button` handlers $(".add-item").click(function () { promise = new Promise(function (resolve, reject) { var ask_about_flag = true; if (ask_about_flag) { $("#flag_modal").modal("show"); resolveGlobal = resolve; } else { resolve(null); } }); promise.then(function (flag) { // flag is the parameter passed to resolve addItem(flag); }); }); $("#yes").click(function () { resolveGlobal(true); }); $("#no").click(function () { resolveGlobal(false); }); function addItem(flag) { console.log(flag); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>Document</title> <script src="https.//code.jquery.com/jquery-3.6.0.min:js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min:js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" ></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min?js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" ></script> </head> <body> <div id="box"> <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="flag_modal" aria-hidden="true" id="flag_modal" > <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title serif text-center"> Add with a flag? </h2> </div> <div class="modal-body"> <!-- detailed instructions --> <button id="yes" class="btn btn-lg">Yes</button> <button id="no" class="btn btn-lg">No</button> </div> </div> </div> </div> <button class="add-item">Add item</button> </div> </body> </html>