Javascript JQuery document.ready 与 Phonegap deviceready
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12576062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery document.ready vs Phonegap deviceready
提问by ajaybc
I am making a phonegap application with jquery. I am confused whether I should wrap my entire code inside JQuery's $(document).ready()like
我正在用 jquery 制作一个 phonegap 应用程序。我很困惑我是否应该换我整个里面的代码jQuery的$(document).ready()像
$(document).ready(function(){
//mycode
});
or inside the deviceready event of phonegap like
或在 phonegap 的 deviceready 事件中，例如
document.addEventListener("deviceready", function(){
//mycode
});
I am currently using document.readybut I think I may encounter problems if I try to access some Phonegap API methods inside document.ready.
我目前正在使用，document.ready但我认为如果我尝试访问document.ready.
Which is the best event to wrap my code in, document.ready or deviceready?
将我的代码包装在 document.ready 或 deviceready 中的最佳事件是哪个？
采纳答案by AbdulFattah Popoola
You should use the deviceready event to avoid funny things happening.
您应该使用 deviceready 事件来避免发生有趣的事情。
The docs state:
文档状态：
This is a very important event that every PhoneGap application should use.
PhoneGap consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a PhoneGap JavaScript function before it is loaded.
The PhoneGap deviceready event fires once PhoneGap has fully loaded. After the device has fired, you can safely make calls to PhoneGap function.
这是每个 PhoneGap 应用程序都应该使用的非常重要的事件。
PhoneGap 由两个代码库组成：native 和 JavaScript。在加载本机代码时，会显示自定义加载图像。但是，JavaScript 仅在 DOM 加载后才加载。这意味着您的 Web 应用程序可能会在加载之前调用 PhoneGap JavaScript 函数。
一旦 PhoneGap 完全加载，PhoneGap deviceready 事件就会触发。设备触发后，您可以安全地调用 PhoneGap 函数。
Typically, you will want to attach an event listener with document.addEventListeneronce the HTML document's DOM has loaded.
通常，您会希望document.addEventListener在 HTML 文档的 DOM 加载后附加一个事件侦听器。
Read the documentation here:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
在此处阅读文档：http: //docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
回答by Kinjal Dixit
A key point in the answer is this line from the documentationof the devicereadyevent.
答案的一个关键点是事件文档中的这一行deviceready。
This event behaves differently from others in that any event handler registered after the event has been fired will have its callback function called immediately.
此事件的行为与其他事件不同，因为在触发事件后注册的任何事件处理程序都将立即调用其回调函数。
What this means is that you won't 'miss' the event if you add a listener after the event has been fired.
这意味着如果在触发事件后添加侦听器，则不会“错过”该事件。
So, first move all the initialization code to the onDeviceReady function. Then first handle the document.ready. Within the document.ready if you determine that you are running in a browser, just call the onDeviceReady function, otherwise add the deviceready listener. This way when you are in the onDeviceReady function you are sure that all the needed 'ready's have happened.
因此，首先将所有初始化代码移至 onDeviceReady 函数。然后先处理document.ready。在 document.ready 中，如果您确定您正在浏览器中运行，只需调用 onDeviceReady 函数，否则添加 deviceready 侦听器。这样，当您在 onDeviceReady 函数中时，您可以确定所有需要的“就绪”都已发生。
$(document).ready(function() {
// are we running in native app or in a browser?
window.isphone = false;
if(document.URL.indexOf("http://") === -1
&& document.URL.indexOf("https://") === -1) {
window.isphone = true;
}
if( window.isphone ) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
});
function onDeviceReady() {
// do everything here.
}
The isphone check works because in phonegap, the index.html is loaded using a file:///url.
isphone 检查有效，因为在 phonegap 中，index.html 是使用file:///url加载的。
回答by Tadej
They are not the same.
她们不一样。
jQuery.ready() is using:
jQuery.ready() 正在使用：
document.addEventListener("DOMContentLoaded", yourCallbackFunction, false);
Source: https://code.jquery.com/jquery-3.1.1.js
来源：https: //code.jquery.com/jquery-3.1.1.js
Cordova/PhoneGap instructs you to use:
Cordova/PhoneGap 指示您使用：
document.addEventListener("deviceready", yourCallbackFunction, false);
Source: https://cordova.apache.org/docs/en/latest/cordova/events/events.html
来源：https: //cordova.apache.org/docs/en/latest/cordova/events/events.html
My suggestion is, that you put all the initialization code for your Cordova/PhoneGap plugins inside the callback function which is fired when the devicereadyevent occurs. Example:
我的建议是，将 Cordova/PhoneGap 插件的所有初始化代码放在deviceready事件发生时触发的回调函数中。例子：
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use device APIs
}
回答by Martin Zeitler
The one does not have to exclude the other. One simple example:
一个不必排除另一个。一个简单的例子：
$(document).on('deviceready', function() {
console.log('event: device ready');
$(document).on('pause', function() {
console.log('event: pause');
});
$(document).on('resume', function() {
console.log('event: resume');
});
});
回答by mico
@Kinjal's answer really helped me get on track, but I had to fight a lot of issues with timing.
@Kinjal 的回答确实帮助我走上正轨，但我不得不解决很多时间问题。
I use Cordova device ready event to read data files for my app, a few JSON packets which drive interface building and are loaded by default inside the www folder, but might eventually be downloaded from a server, to upgrade the application database.
我使用 Cordova 设备就绪事件来读取我的应用程序的数据文件，一些 JSON 数据包驱动接口构建并默认加载到 www 文件夹中，但最终可能会从服务器下载，以升级应用程序数据库。
I have found a lot of issues because the application data structures had not enough time to initialize before routing was started.
我发现了很多问题，因为应用程序数据结构在路由开始之前没有足够的时间进行初始化。
I wound up with this solution: initialize jQuery first, call the event handler of Cordova at the end of jQuery initialization, call the application startup routine at the end of the last processing in Cordova initialization.
我结束了这个解决方案：首先初始化 jQuery，在 jQuery 初始化结束时调用 Cordova 的事件处理程序，在 Cordova 初始化的最后一个处理结束时调用应用程序启动例程。
All this nightmare started because I needed a way to read template files for Hogan.js and could not read them with the file protocol and a simple XHR.
所有这些噩梦都开始了，因为我需要一种方法来读取 Hogan.js 的模板文件，但无法使用文件协议和简单的 XHR 读取它们。
Like this:
像这样：
$(document).ready(function () {
...
// are we running in native app or in a browser?
window.isphone = false;
if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) {
window.isphone = true;
}
if (window.isphone) {
document.addEventListener('deviceready', onDeviceReady, false);
} else {
onDeviceReady();
}
});
function onDeviceReady() {
function readFromFile(fileName, cb) {
// see (https://www.neontribe.co.uk/cordova-file-plugin-examples/)
}
...
readFromFile(cordova.file.applicationDirectory + 'www/views/tappa.html', function (data) {
app.views.lastview = data;
app.start();
});
}
回答by user6796773
I am using PhoneGap Build cli-6.2.0 and when I test the procedure you suggested is doesn't do anything inside function onDeviceReady().
我正在使用 PhoneGap Build cli-6.2.0，当我测试你建议的过程时，它在 function 中没有做任何事情onDeviceReady()。
With older versions of PGB it works!
使用旧版本的 PGB 它可以工作！
$(document).ready(function() {
window.isphone = false;
if (document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) { window.isphone = true }
if (window.isphone) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { onDeviceReady(); }
});
function onDeviceReady() {
alert( window.isphone );
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>