Javascript 向后执行

Question

一个应用正在使用 Cordova 和 InAppBrowser 插件版本 3.2.1 来加载 Asp.Net 4.5 中内置的网页。 2.我们一直遇到不稳定的行为，所以我制作了一个页面来解决问题并在此处分享。

此页面包含一个非常简单的按钮，在 onclick event:

中执行 JS

<button onclick="alert('1'); alert('2'); alert('3');"> EXECUTION</button>

完美运行，但是当网站嵌入应用程序时，执行顺序倒退，显示：

警报 3
警报 2
警报 1

使用不显眼的 JS 得到相同的结果：

<button id="testButton">Test</button>

$(document).ready(function () {
    $("#testButton").click(function () {
       alert('1');
       alert('2');
       alert('3');
    });
});

运行 ios 中的网站在 Safari 中运行得非常好。

有什么想法吗？

更新

正如@Bergi 在评论中所建议的那样，添加睡眠 timeout 可验证管理同步调用的问题。以下代码以正确的顺序触发警报：

$("#testButton").click(function () {
    alert('1');
    setTimeout(function () { alert('2'); }, 2000);
    setTimeout(function(){ alert('3'); }, 4000);
});

但不是在超时时间更近的时候。以下以错误的顺序显示警报：

$("#testButton").click(function () {
    alert('1');
    setTimeout(function () { alert('2'); }, 1);
    setTimeout(function(){ alert('3'); }, 2);
});

更新 2

正如@Bergi 在评论中提出的那样，我已经尝试过：

$("#testButton").click(function () {
    var x = []; x.push(1); x.push(2); alert(x);
});

结果正确，显示包含以下内容的警报：“1,2”。

Issue 已被举报。

Answer 1

正如@Bergi 在评论中建议的那样，您调用的 alert() 版本在某些平台上可能是异步的，而在其他平台上可能是同步的。这将解释您所看到的行为。

根本不使用 window.alert()，当你需要一个警告框时，你应该使用 cordova-plugin-dialogs.

中的 navigator.notification.alert()

注意这个函数的签名：

navigator.notification.alert( message, alertCallback, [title], [buttonName] )

alertCallback 函数在警告框关闭后被调用。即使有些实现是同步的（因为它们使用本机浏览器 alert() 函数）而有些是异步的，navigator.notification.alert() 为这两种情况提供了兼容的接口。

嗯，大部分兼容。在 navigator.notification.alert() 调用本机 alert() 的平台上，该函数不会 return 直到警告框被用户关闭。在使用其他实现的平台上，该函数可能会立即 return。但在这两种情况下，alertCallback 将在警告框关闭时被调用。

cordova-plugin-dialogs 还提供了 navigator.notification.confirm() 和 navigator.notification.prompt() 的类似实现，每个都带有完成回调。

来自 cordova-plugin-inappbrowser 的 tests.js 中有一段有趣的代码：

window.alert = window.alert || navigator.notification.alert;
if (isWindows && navigator && navigator.notification && navigator.notification.alert) {
    // window.alert is defined but not functional on UWP
    window.alert = navigator.notification.alert;
}

请注意此函数如何在没有 window.alert 的平台上以及 UWP 上将 window.alert 设置为与 navigator.notification.alert 相同。虽然与您的情况没有直接关系，但这说明了不同平台上可能会有不同的实现方式。但是使用 navigator.notification.alert() 应该可以让你为所有人编写兼容的代码。只是不要假设此功能是立即 return 还是等待警报被解除 - 请改用 alertCallback。

Javascript 向后执行

Javascript executing backwards

javascript

cordova

cordova-plugins

inappbrowser

更新

更新 2