javascript - 如何防止在 jquery 对话框表单中输入数据之前执行 javascript 代码

Question

我正在尝试开发基于 jQuery 对话框表单的可重用函数，作为 JS 提示的替代品。我需要用户在执行其他JS代码之前输入数据(后面的AJAX请求取决于用户的输入)。

如果按下“确定”按钮或“返回”按钮，该函数应读取一个文本字段并返回输入的值。

我成功地创建了带有回调的函数，并且它正在工作，只是它不等待用户使用react以及函数执行后的代码。

我知道 jQuery 调用是异步的，并尝试了带有延迟选项的版本，但这也不起作用。

有什么方法可以让我的代码在继续执行之前等待用户输入吗？当然，理想的解决方案是使用 var userInput = getTxtField(....);

更新:函数 getTxtField 由其他用户操作(按钮)触发:renameFile、renameFolder、addFile 等。

更新 #2 问题已解决

感谢@SuperPrograman的建议，我开始思考异步执行的逻辑。原始代码是使用 value = Prompt(...) 方法开发的，AJAX 代码位于单个函数的底部。我只是将 AJAX 代码放在一个单独的函数中，现在它可以按预期工作。我已经更新了底部的 JS 代码。

我的代码如下

....
<div class='hidden' id='dialog-newName' title=''>
  <label id='label-txtField' for="txtField"></label>
  <input type="text" name="txtField" id="txtField" value="" class="text ui-widget-content ui-corner-all">
</div>        
....
function getTxtField (title, label, defVal, callBack) {
    $('#label-txtField').text(label);
    $('#txtField').val(defVal);
    $( '#dialog-newName' ).dialog({
        modal: true, closeOnEscape: false, 
        height: 200, width: 500,
        title: title, 
        buttons: {
            OK: function() {
                callBack('OK', $('#txtField').val());
                $(this).dialog( "close" );
            },
            Cancel: function() {
                $('#txtField').val('');
                //callBack('Cancel', ''); // not necessary
                $(this).dialog( "close" );
            }
        },
    });
}
...
    switch (action) {
      case 'action1':
       // user pressed button for Action1
       console.log('before dialog getTxtField ');
       getTxtField('Action1', 'Label1', 'defaultValue1', function(buttonP, result) {
         console.log(buttonP + ' value=' + result); // prints OK
       });
      // executed before input finished
      console.log('after dialog getTxtField returnVal=' + newName + ')');
      break;
    case 'action2':
     // ....
     break;
    }
    // proceed with AJAX request for selected action
...
//=========================
// working code
//=========================
$('.selector').click ( function() {
  var frmId = $(this).closest('form').attr('id');
  var action = $(this).attr('ajaxAction');
  var form = $('#theForm')[0];
  var ajaxData = new FormData(form);
  switch action {
    case 'actions that do not require function getTxtField':
      ajaxData.append(specific data for the action);
      ajaxCall (frmId, ajaxData);
      break;
    case 'actions that with function getTxtField':
      getTxtField('Titlexx', 'Labelxx', 'defaultValuexx', function(buttonP, result) {
        // process result
        ajaxData.append(specific data for the action);
        ajaxCall (frmId, ajaxData);
      });
      break;
  }
})

function ajaxCall (id, data) {
  // standard ajax code
}

Answer 1

由于我的评论有帮助，我将添加答案以方便快速访问。基本上，您希望格式化代码，以便对话框之后的所有内容都直接在回调内运行或从回调启动。

因此假设一个简单的 getTxtField 提示方法接受消息和回调函数，而不是:

stuffBeforePrompt();
getTxtField('stuff', function() { });
stuffAfterPrompt();

您只需要:

stuffBeforePrompt();
getTxtField('stuff', function() {
    stuffAfterPrompt();
});

也许您可以使用“线程”或工作人员制定一些解决方案，在单独的线程上运行提示并 sleep main 直到结果(反之亦然)；但我怀疑这是否值得稍微使用方便。