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

【问题标题】：How to prevent executing javascript code before data is entered in jquery dialog form如何在 jquery 对话框表单中输入数据之前防止执行 javascript 代码
【发布时间】：2019-02-07 06:11:47
【问题描述】：

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

该函数应该读取一个文本字段并在按下 OK 按钮或 Return 时返回输入的值。

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

我知道 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
}

【问题讨论】：

我猜您可能想在输入更改时触发该功能？ api.jquery.com/change 您还可以检查 js 更改功能，这样它只会在输入值大于例如时触发。 3 个字符。
@dmikester1 我更新了我的问题以阐明如何触发该功能。我相信现在很明显我实际上想要替换 JS 提示符！代码就是这样工作的，我只是想避免丑陋的浏览器实现提示！
您只需要格式化代码，以便对话框之后的所有内容都在回调中运行或从回调中启动，除非您进行糟糕的hacky sleep
只需点击评论旁边的向上箭头
@user3560520 你需要至少 15 声望才能投票：stackoverflow.com/help/privileges/vote-up

标签： javascript jquery jquery-ui-dialog

【解决方案1】：

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

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

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

你只需要：

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

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

【讨论】：