Question

我有一个代码，我在一个项目中使用它作为'数据访问'类的原型，其中所有需要的计算和样本数据都存在。问题是如果我在服务器'Web服务'中有这些，我可以使用'加载指示器'告诉用户我正在做一些工作所以请稍等。

'数据访问'代码：

(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。

这让我进入了Web Workers，我将立即学习并尝试，但我需要了解我的选择和帮助，这将解决我的问题。这是我需要快速做的事情：/

总结一下，我需要立即加载页面，显示一个加载指示器（我已经知道如何执行此操作），获取数据异步，然后将数据附加到viewModel属性，以便它可以更新绑定的HTML元素数据

Answer 1

我使用Web Workers解决了这个问题。从tutorial开始。几乎在任何情况下都足够了。

JavaScript异步调用文字对象函数

1 个答案: