javascript - 两条语句执行之间所需的延迟

Question

我正在使用 extjs 4.2，在一个地方我正在加载商店对象，如下所示:

var  userDetailStore = Ext.create('Ext.data.Store', {
    model : 'Person.DetailsModel',
    autoLoad : true,

    proxy : {
        type : 'ajax',
        method : 'POST',
        url : 'getValueAction.action',
        reader : {
            type : 'json',
            root : 'details'
        },
        writer : {
            type : 'json',
            root : 'details'
        }
    },
    fields : ['id','loginName','referenceId' ,'name']
});//Here I load the store which will definitely contain a list of values.

在下一行中，我想从存储对象中获取第一个值的referenceId，如下所示

var empId =  userDetailStore.getAt(0).get('referenceId')

我收到错误，因为到目前为止，存储对象 userDetailStore 的 getCount() 给我的值为零。但是如果我之前写了一个警报语句，例如 alert('loading data');我获取referenceId的行然后代码工作正常。userDetailStore.getCount()行给了我确切的值。

所以我认为加载商店和使用商店之间需要某种延迟，但我不想显示警报。我什至使用了 sleep() 方法警报语句的位置。但这也不起作用。(顺便说一句，我什至不想通过执行 sleep() 来卡住浏览器)

加载商店时我做错了什么吗？有什么通用方法可以让我在商店完全加载后执行使用商店的代码吗？

有人请帮帮我...

问候:开发

Answer 1

Vijay 的答案是正确的，但我想我应该扩展这个概念，以便清楚地表明这个答案如何适合您正在做的事情。

重要的是要了解，当您发出 AJAX 请求时，该请求是异步的。实际上，这意味着(正如您所发现的)调用脚本的其余部分不会等待异步过程完成。相反，当您发出异步请求时，您的脚本将继续以愉快的方式执行下一行代码。

因此，如果您仔细想想，这就是为什么您在商店中没有看到“计数”的原因。当您的异步请求正在发送到服务器、获取结果，然后将其返回到您的请求时，其余代码继续执行，而忽略了异步请求中发生的情况(这正是为什么异步请求如此强大且令人敬畏)。

这也是为什么添加警报似乎可以“解决”您的问题。当您调用alert()时，您实际上会在警报发生时停止执行脚本。但是，由于您对数据的请求是异步的，因此您单击警报的“确定”按钮(从而恢复脚本的处理)所花费的时间为异步请求提供了足够的时间来完成其生命周期并更新原始调用对象。

鉴于此，可以理解为什么“延迟”似乎是一种理想的方式，因为警报的“延迟”(或实际上是“停止”)解决了您的问题(至少在表面)。但是，对于异步请求，您永远无法真正知道需要多长时间才能完成。如果您有很大的响应，或者存在异常的网络延迟，或者任何其他数量的问题……硬编码的延迟可能会起作用，但也可能不起作用。最令人抓狂的是，您永远不会获得一致的结果，并且会不断增加“延迟”，以便适应所有可能导致异步请求花费越来越长时间的事情。

这就是为什么存储的 load() 事件(以及一般的回调)是一个需要理解和实现的关键概念。通过监听 load() 事件，然后仅在该事件触发的上下文中执行您需要的代码，您可以确定存储的异步数据请求已完成。

如果您以前没有使用过回调和事件处理，那么确实需要一些时间来适应才能打破线性的过程思维方式。然而，在处理一般的 AJAX 请求，特别是像 ExtJS 4 这样的事件驱动框架时，您需要接受这个概念，以便构建有效且一致的应用程序。