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

Question

我正在尝试开发基于 jQuery 对话框表单的可重用功能，以替代 JS 提示符。我需要用户在执行其他 JS 代码之前输入数据（后面的 AJAX 请求取决于用户的输入）。

该函数应该读取一个文本字段和 return 如果按下确定按钮或 Return 输入的值。

我设法创建了带有回调的函数并且它正在运行，除了它不等待用户做出反应和函数执行后的代码。

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

有没有办法让我的代码在继续执行之前等待用户输入？当然，理想的解决方案是使用 like 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

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

所以假设一个简单的 getTxtField 提示方法接受一条消息和一个回调函数，而不是：

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

您只需要：

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

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

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

How to prevent executing javascript code before data is entered in jquery dialog form

javascript

jquery

jquery-ui-dialog