비동기 함수

SpreadJS는 비동기 값 평가를 지원하는 AsyncFunction을 제공합니다. 서버 측 계산과 같이 프로세스가 계산된 값을 즉시 가져올 수 없는 시나리오에 사용됩니다.

GC.Spread.CalcEngine.Functions.AsyncFunction을 삽입하여 클래스를 만듭니다. defaultValue 메서드로 표시 문자열을 만듭니다. evaluateAsync 메서드를 사용하여 결과를 반환합니다. context.setAsyncResult로 결과를 설정합니다. AsyncFunctionEvaluateMode를 사용하여 비동기 함수 평가 모드를 나타냅니다. 세 가지 모드가 있습니다: 0은 셀을 다시 계산해야 할 경우 AsyncFunction이 다시 계산함을 의미합니다. 예: B1='MyAsync1(A1) + MyAsync2(A2)'. A1의 값이 변경되면 B1의 수식이 다시 계산되며 이에 따라 'MyAsync1(A1)' 및 'MyAsync2(A2)'가 다시 계산됩니다. 1은 REFRESH 함수의 수식이 한 번만 평가됨을 의미합니다. 2는 REFRESH 함수의 수식이 간격을 두고 다시 계산됨을 의미합니다. refresh 메서드 설정 REFRESH 함수의 첫 번째 인수에서 모든 수식을 사용할 수 있습니다. evaluateMode 값은 GC.Spread.CalcEngine.Functions.AsyncFunctionEvaluateMode 열거 값 중 하나여야 합니다. 간격은 evaluateMode가 2인 경우에만 적용될 수 있습니다. 일반적으로 REFRESH 함수를 가장 바깥쪽 함수로 사용합니다. REFRESH 함수 내에 AsyncFunction을 설정할 경우에는 REFRESH 함수 설정을 사용합니다. AsyncFunction 설정은 적용되지 않습니다. addCustomFunction 메서드를 사용하여 정의된 비동기 함수를 추가한 다음 setFormula 메서드를 사용하는 등의 방법으로 수식에서 사용합니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { var asyncSum = function () { }; asyncSum.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("ASUM", 1, 255); asyncSum.prototype.defaultValue = function () { return "Loading..."; }; asyncSum.prototype.evaluateAsync = function (context) { // use setTimeout to simulate server side evaluation // in read world it maybe an ajax post to server for evaluation var args = arguments; setTimeout(function () { var result = 0; for (var i = 1; i < args.length; i++) { result += args[i]; } result *= 2; context.setAsyncResult(result); }, 2000); }; var GetNumberFromServer = function () { }; GetNumberFromServer.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("GETNUMBERFROMSERVER", 1, 2); GetNumberFromServer.prototype.evaluate = function (context, arg1, arg2) { setTimeout(function () { var value = Math.random() + 1; context.setAsyncResult(value); }, 500); }; GC.Spread.CalcEngine.Functions.defineGlobalCustomFunction("GETNUMBERFROMSERVER", new GetNumberFromServer()); var GetTimeFromServer = function () { }; GetTimeFromServer.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("GETTIMEFROMSERVER"); GetTimeFromServer.prototype.evaluate = function (context) { setTimeout(function () { var date = new Date(); context.setAsyncResult(date); }, 500); }; GetTimeFromServer.prototype.evaluateMode = function () { return 2; }; GetTimeFromServer.prototype.interval = function () { return 1000; }; GC.Spread.CalcEngine.Functions.defineGlobalCustomFunction("GETTIMEFROMSERVER", new GetTimeFromServer()); var sheet = spread.sheets[0]; sheet.suspendPaint(); sheet.options.allowCellOverflow = true; sheet.setArray(0, 0, [[5, 15]]); sheet.addCustomFunction(new asyncSum()); sheet.setText(1, 1, 'ASUM(A1,B1)'); sheet.setText(2, 1, 'SUM(A1,B1)'); sheet.setFormula(1, 2, "ASUM(A1,B1)"); sheet.getCell(1, 2).foreColor("green"); sheet.setFormula(2, 2, "SUM(A1,B1)"); sheet.setValue(4, 0, "Edit the formula of C2 or referenced cell' value to see how async function works."); sheet.setValue(8, 0, 'CHANGEVALUE'); sheet.setValue(8, 1, 'FORMULA'); sheet.setValue(8, 2, 'RESULT'); sheet.setValue(8, 3, 'COMMENTS'); sheet.setValue(9, 3, 'On A10 changed'); sheet.setValue(10, 3, 'On A10 changed'); sheet.setValue(11, 3, 'Evaluate once'); sheet.setValue(12, 3, 'Every 2 seconds'); sheet.setValue(9, 0, 1); sheet.setValue(9, 1, '=GetNumberFromServer(A10)'); sheet.setValue(10, 1, '=Refresh(GetNumberFromServer(A10), 0)'); sheet.setValue(11, 1, '=Refresh(GetNumberFromServer(A10), 1)'); sheet.setValue(12, 1, '=Refresh(GetNumberFromServer(A10), 2, 2000)'); sheet.setFormula(9, 2, '=GetNumberFromServer(A10)'); sheet.setFormula(10, 2, '=Refresh(GetNumberFromServer(A10), 0)'); sheet.setFormula(11, 2, '=Refresh(GetNumberFromServer(A10), 1)'); sheet.setFormula(12, 2, '=Refresh(GetNumberFromServer(A10), 2, 2000)'); sheet.getCell(12, 2).foreColor("green"); sheet.setColumnWidth(0, 100); sheet.setColumnWidth(1, 300); sheet.setColumnWidth(2, 200); sheet.setColumnWidth(3, 200); sheet.setValue(15, 1, "=Refresh(now(), 2, 1000)"); sheet.setValue(15, 3, "Every 1 second"); sheet.setFormula(15, 2, "=Refresh(now(), 2, 1000)"); sheet.getCell(15, 2).foreColor("green"); sheet.setValue(18, 1, "=GetTimeFromServer()"); sheet.setValue(18, 3, "Every 1 second"); sheet.setFormula(18, 2, "=GetTimeFromServer()"); sheet.getCell(18, 2).foreColor("green"); sheet.getCell(18, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.right); sheet.resumePaint(); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height:100%;"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }