JavaScript异步调用文字对象函数

Question

I have this code that I use in a project which is prototype as 'data access' class where all the calculations needed and the sample data exists. Problem is that if I had these in a server 'Web Service' I could use a 'load indicator' to tell the user that I'm currently doing some work so please wait.

The 'data access' code:

(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
    })();

I'm using knockout.js, HTML5 and MVVM to bind a ViewModel to my page. This is one of the pages ViewModel which will use the data access object to show some charts and custom template controls with heavy calculations in the data access methods.

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;

Now I think you have a full view of my structure and you understand the user experience is tragic in some circumstances due to the calculations on the data access. When the user will select to navigate to the op_profit page, it will have some seconds (4-5 sometimes maybe more) to load the page and the show it.

I'm not a JavaScript expert but my mind goes to asynchronous processing, something like threading in the desktop world, or calling an AJAX operation or other async APIs.

That gets me into Web Workers which I will study and try now, but I need to know my options and your help which will solve my problem. This is something I need to do real quick :/

Summarizing, I need to load the page immediately, show a load indicator (I already know how to do this), get the data asynchronous and then append the data to the viewModel properties so it can update the binded HTML elements with the data.

Answer 1

I solved the problem using Web Workers. Started from this tutorial . It's enough for almost any situation.