JavaScript异步调用文字对象函数
JavaScript asynchronous call to literal object function
我有这个代码,我在一个项目中使用,这是原型作为'数据访问'类,其中所有需要的计算和样本数据存在。问题是,如果我在服务器'Web Service'中有这些,我可以使用'load indicator'来告诉用户我目前正在做一些工作,所以请等待。
数据访问代码:
(function () {
DataAccess.db = {
profitList: [{ CalendarActualDateDDMMYYYY: '01/07/2009', CalendarActualDateMMDDYYYY: '07/01/2009', CalendarMonth: 7, CalendarYear: 2009, MonthName: 'July', DateInt: 200907, FiscalMonth: 1, FiscalYear: 2010, Quarter: 'Q1', Division: 'Holdings', Company: 'Holdings', RevenueYTD: 4900, RevenuePeriodic: 4900, AdjustedOperatingProfitYTD: 392, AdjustedOperatingProfitPeriodic: 392, ProfitBeforeTaxYTD: 372, ProfitBeforeTaxPeriodic: 372, OperatingMarginYTD: 8, OperatingMarginPeriodic: 8, OperatingMarginPeriodic6MonthsMovingAverage: 0 },
{ CalendarActualDateDDMMYYYY: '01/08/2009', CalendarActualDateMMDDYYYY: '08/01/2009', CalendarMonth: 8, CalendarYear: 2009, MonthName: 'August', DateInt: 200908, FiscalMonth: 2, FiscalYear: 2010, Quarter: 'Q1', Division: 'Holdings', Company: 'Holdings', RevenueYTD: 8673, RevenuePeriodic: 3773, AdjustedOperatingProfitYTD: 656, AdjustedOperatingProfitPeriodic: 264, ProfitBeforeTaxYTD: 623, ProfitBeforeTaxPeriodic: 251, OperatingMarginYTD: 7.56, OperatingMarginPeriodic: 7, OperatingMarginPeriodic6MonthsMovingAverage: 0 },
{ CalendarActualDateDDMMYYYY: '01/09/2009', CalendarActualDateMMDDYYYY: '09/01/2009', CalendarMonth: 9, CalendarYear: 2009, MonthName: 'September', DateInt: 200909, FiscalMonth: 3, FiscalYear: 2010, Quarter: 'Q1', Division: 'Holdings', Company: 'Holdings', RevenueYTD: 12687, RevenuePeriodic: 4014, AdjustedOperatingProfitYTD: 977, AdjustedOperatingProfitPeriodic: 321, ProfitBeforeTaxYTD: 928, ProfitBeforeTaxPeriodic: 305, OperatingMarginYTD: 7.7, OperatingMarginPeriodic: 8, OperatingMarginPeriodic6MonthsMovingAverage: 0 }],
// The list can go on big to 640 objects
getOperationProfitByCompany: function (company) {
// various queries using SQLike ot jLinq on the profiList
},
// other same function data access workers
})();
我使用knockout.js, HTML5和MVVM将ViewModel绑定到我的页面。这是ViewModel的一个页面,它将使用数据访问对象来显示一些图表和自定义模板控件,这些控件在数据访问方法中有大量的计算。
MyPrototype.op_profit = function (params) {
var self = this;
var vm = criteria.viewModel;
var filterProfitList = function (singleDate, aStartDate, aEndDate) {
var list = [];
if (vm.allHoldingsSelected()) {
list = DataAccess.db.getProfitConsolidateAll(singleDate, aStartDate, aEndDate);
} else if (vm.isDivisionSelected()) {
list = DataAccess.db.getProfitWithCriteriaDivision(
vm.selectedDivision(), singleDate, aStartDate, aEndDate);
} else if (vm.isCompanySelected()) {
list = DataAccess.db.getProfitWithCriteriaDate(
[{ CompanyId: vm.selectedCompany() }], singleDate, aStartDate, aEndDate);
}
return list;
};
var filterChartDataSource = function () {
var list = [];
if (vm.allHoldingsSelected()) {
list = DataAccess.db.getOperationProfitByAllHoldings();
} else if (vm.isDivisionSelected()) {
list = DataAccess.db.getOperationProfitByDivision(vm.selectedDivision());
} else if (vm.isCompanySelected()) {
list = DataAccess.db.getOperationProfitByCompany(vm.selectedCompany());
}
return list;
};
// ... other functions and properties ...
var viewModel = {
// ... functions and properties ...
profitAnalysisList: ko.observableArray(filterProfitList(self.fromDate(), self.fromDate(), self.toDate())),
chartOptions: {
// .. properties objects, functions
dataSource: filterChartDataSource(),
},
rangeSelectorOptions: {
// .. properties objects, functions
dataSource: filterChartDataSource(),
}
// Can be used in other call back event functions too
};
ko.applyBindings(viewModel);
return viewModel;
现在我想你对我的结构有了全面的了解,并且你明白在某些情况下,由于数据访问的计算,用户体验是悲惨的。当用户选择导航到op_profit页面时,它将有一些秒(4-5,有时可能更多)来加载页面并显示它。
我不是JavaScript专家,但我想到了异步处理,就像桌面世界中的线程,或者调用AJAX操作或其他异步api。
这让我进入网络工作者,我将学习和尝试现在,但我需要知道我的选择和你的帮助,这将解决我的问题。这是我需要快速做的事情:/
总之,我需要立即加载页面,显示加载指示器(我已经知道如何做到这一点),获得异步数据,然后将数据附加到viewModel属性,以便它可以使用数据更新绑定的HTML元素。
我使用Web Workers解决了这个问题。从本教程开始。
相关文章:
- 创建对象函数原型和代码是错误的
- JavaScript模块模式-如何在使用对象/函数之前激发构造函数/init函数
- 如何从onclick字符串中引用javascript对象函数
- 更改对象函数仅用于示例
- javascript和jQuery的嵌套对象函数中的变量范围
- 将对象函数传递给请求动画帧时丢失对象引用
- 对象函数返回函数而不是值
- 使用onclick调用属性对象函数
- javascript拉斐尔对象函数传递
- 如何从onClick事件调用对象函数
- 可以't获取具有“t”的对象变量;这个“;由setTimeout()函数调用的对象函数中的属性
- 对象没有't继承父对象函数
- 调用父对象函数
- "这个“;对象函数内部的引用
- 将变量添加到对象函数调用的末尾
- 传单错误:对象函数没有方法'createIcon'在LayerGroup中创建自定义图标标记时
- TypeError:对象函数Object(){〔本机代码〕}没有方法'方法'
- 挖空 - 单击绑定到对象函数 - 范围问题
- 类型错误: 对象函数...没有方法“打开”
- JavaScript 对象函数