JavaScript中的模态阻塞对话框

Question

我正在使用jQuery和jQuery UI开发JavaScript中的Openlayers工具栏。

我想要实现的一个功能是将点添加到地图上。

在OpenLayers中，您必须监听名为“sketchcomplete”的事件。

layer.events.on({
    'sketchcomplete': onPointAdded
});

问题出现在onPointAdded回调函数中。该回调应返回true或false。True表示该点应添加到地图上，false表示取消将此点添加到地图上。

现在回调函数的代码如下所示:

onPointAdded = function(feature) {
  var f = feature.feature;
  var result = false;
  $('#dialog-point-add').dialog({
    modal : true,
    buttons : {
      'Add point' : function() {
        result = true;
        $(this).dialog("close");
      },
      'Cancel' : function() {
        result = false;
        $(this).dialog("close");
      }
    }
  });
  return result;
};

问题是该对话框不会阻塞执行代码。我想问您如何处理这种情况？我希望向用户显示一个确认添加点的对话框。

- Marcin

Answer 1

如果我理解问题正确，您将无法使用jquery ui对话框完成此操作。然而，原生的js确认框应该可以工作。

- BNL

Answer 2

该函数无法阻塞，因为JavaScript是单线程的，不能执行其他任何操作。为什么不将您想要在函数返回true时调用的逻辑添加到“添加点”回调中呢？

编辑：一个“正常”的JavaScript确认对话框会阻塞：

onPointAdded = function(feature) {
  return confirm("Sure?");
};

- Tim Büthe

---

你的意思是添加逻辑吗？你是指更改调用此回调函数的代码吗？如果是，这意味着我必须深入研究OpenLayers代码并进行更改，但我宁愿不要触碰库。你能解释一下说“添加逻辑”的意思吗？谢谢。 - Marcin

我不熟悉Open Layers，以为当函数返回true时你会调用一些代码。所以我的建议是将代码（或调用）移动到jQuery UI回调中。抱歉，我的理解有误。 - Tim Büthe

这个解决方案当然是阻塞的，但我需要在我的对话框表单上显示刚添加的点的名称输入，并且当用户按下保存/确认按钮时，发送带有来自此表单的坐标和名称的Ajax post。当用户点击“取消”时，我需要删除该点。我找到了一个使用不同openlayers回调的解决方案。非常感谢您... - Marcin

你应该发布你的解决方案。 - Tim Büthe