时间戳

首页 > 解决方案 > 如何在 htmlService 中附加新内容而不调用 x 时间返回（gs 代码）

javascript - 如何在 htmlService 中附加新内容而不调用 x 时间返回（gs 代码）

问题描述

在这种情况下，我尝试在我的电子表格上创建一个日志记录窗口。首先，我尝试使用 append on createHtmlOutput()，但我发现之后showSideBar()，不可能追加新内容。

这里的例子： 在此处输入图像描述

所以我尝试了另一种方式。

这里服务器端：

   var logs = new Array();
//create html output from sidebar.html
function showSidebar() {
var output = HtmlService.createHtmlOutputFromFile("sidebar");
//  PropertiesService.getScriptProperties().setProperty('output',output);
//  output.append("text");
    output.setTitle("test");
  SpreadsheetApp.getUi().showSidebar(output);
}

// Function to append new log
function addLog1(text) {
Logger.log("call");
Logger.log(logs);
//logs.push(text);
//  PropertiesService.getScriptProperties().setProperty('arr', logs);
 PropertiesService.getScriptProperties().setProperty('arr', text);
}

function log1() {
 addLog1("coucou ");
}

function log2() {
Logger.log("ici");
 Utilities.sleep(2000);
 addLog1("coucou1");
}

function log3() {
Logger.log("ici");
 Utilities.sleep(2000);
 addLog1("coucou2");
}

function log4() {
Logger.log("ici");
 Utilities.sleep(2000);
 addLog1("coucou3");
}

function log5() {
Logger.log("ici");
 Utilities.sleep(2000);
 addLog1("coucou5");
}

//return log (i try with send just one string or an array of logs)
function actionOne() {
var res = PropertiesService.getScriptProperties().getProperty('arr');
PropertiesService.getScriptProperties().setProperty('arr', "");
  return res;
}

function test(){
showSidebar();
  log1();
  log2();
  log3();
  log4();
  log5();
}

这里客户端

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id="logs"></div>
    <script>
    document.addEventListener("DOMContentLoaded", function(){
    setInterval(function(){google.script.run.withSuccessHandler(callActionTwo).actionOne();}, 500);
});
    var element = document.getElementById("logs");
    function callActionTwo(dat){
    if(dat){
//         var para = document.createElement("br");
//         para.innerHTML = dat[i] + "<br>";
//         document.getElementById("logs").appendChild(para);
            element.innerHTML += dat+ "<br>";
            }


    }

    </script>
  </body>
</html>

我多次调用 PropertiesService 和谷歌的这个解决方案的问题对其进行了限制。

如果您有任何建议，我会很高兴听到，谢谢

编辑 安东的回答后，我改变了这样的：

 //getProperty return an array of logs
    function actionOne() {
      var res = JSON.parse(PropertiesService.getScriptProperties().getProperty('arr'));
      Logger.log("res " + res)
      PropertiesService.getScriptProperties().setProperty('arr', "");
      logs = [];
      return res;
    }

但是尽管清除了 PropertiesService 和数组日志。我的日志中仍有冗余 在此处输入图像描述

标签： javascriptgoogle-apps-script

解决方案

目前尚不清楚您的问题是关于 PropertiesService 限制还是服务器调用次数。每 500 毫秒调用一次 PropertiesService 确实是矫枉过正。如果我正确理解您的其他问题，那就是避免多次客户端-服务器调用来获取数据。为什么不将所有数据存储为单个键值对？

//write data to storage
var data = {
     log1: "data1",
     log2: "data2",
     log3: "data3"
};
var dataAsString = JSON.stringify(data);
var props = PropertiesService.getScriptProperties();
props.setProperty("data", data);

//Parse data
var data;
var dataAsString = props.getProperty("data");
try {
   data = JSON.parse(dataAsString);
} catch(e) {    
   data = {}; 
}

return data;

然后，您可以在客户端迭代数据对象的属性并将内容附加到 HTML 标记。

另外，将键值对写入存储时休眠有什么意义？

function log2() {
Logger.log("ici");
 Utilities.sleep(2000);
 addLog1("coucou1");
}

这只会使脚本运行缓慢。

推荐阅读