리터럴 객체 함수에 대한 JavaScript 비동기 호출

Question

필자는 모든 계산이 필요하고 샘플 데이터가있는 '데이터 액세스'클래스로 프로토 타입 인 프로젝트에서이 코드를 사용합니다. 문제는 서버의 '웹 서비스'에 이러한 항목이 있으면 사용자에게 현재 작업 중임을 알리기 위해 '로드 표시기'를 사용할 수 있으므로 기다려주십시오.

'데이터 액세스'코드 : 나는 knockout.js을 사용하고

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

, HTML5와 MVVM 내 페이지에 뷰 모델을 바인딩. 이것은 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 요소를 데이터로 업데이트 할 수 있습니다.

Answer 1

웹 워커를 사용하여 문제가 해결되었습니다. 시작 주소는 tutorial입니다. 거의 모든 상황에서 충분합니다.