Javascript 如何在htmlService中附加新内容，而无需回拨x时间（gs代码）_Javascript_Google Apps Script

Javascript 如何在htmlService中附加新内容，而无需回拨x时间（gs代码）

javascript google-apps-script

Javascript 如何在htmlService中附加新内容，而无需回拨x时间（gs代码）,javascript,google-apps-script,Javascript,Google Apps Script,在这种情况下，我尝试在电子表格上创建一个日志窗口。首先，我尝试在createHtmlOutput上附加内容，但我发现在showSideBar之后，附加新内容是不可能的例如：所以我用另一种方式尝试这里是服务器端： var logs = new Array(); //create html output from sidebar.html function showSidebar() { var output = HtmlService.createHtmlOutputFromFil

在这种情况下，我尝试在电子表格上创建一个日志窗口。首先，我尝试在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和阵列日志。我的日志中仍然有冗余

不清楚您的问题是关于属性服务限制还是服务器调用的数量。每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");
}

这只会使脚本运行缓慢。

谢谢您的回答，但我仍然需要调用getProperty检查是否有新的登录数据？我需要清除数据，以避免在客户端重写相同的日志。这里的睡眠只是为了模拟一个非常大的脚本。我将在一个包含30个文件和3000多行的脚本中实现此日志函数。@RaphaelObadia我不知道有什么可能阻止您执行上述所有操作。如果您需要每500毫秒调用一次此服务，我认为没有解决方法，因为数组日志和调用属性服务每3000ms一次，而不是每500毫秒一次。但是我有一个小问题，如果你知道为什么的话，那是因为你每3秒钟调用actionOne函数，然后把它返回的任何内容附加到HTML页面。如果希望它覆盖以前的数据，则需要在每次调用之前将innerHTML设置为“”空字符串。好的，但当我清除数组日志并将属性设置为空时，我不应该在每次调用之前都有一个完整的数组。看起来有两个线程正在处理两个var日志，一个是空的，另一个是我推送所有日志但无法清除的。我在脚本开头将var logs=[]声明为一个全局变量。请您澄清一下您需要如何显示日志。你需要如何保存它，因为如果你想要一次执行的日志，你可以使用Logger.getLog，然后打印它。我想建立一个手动日志过程，并在类似侧栏的屏幕中打印它。所以我传递了一个字符串，我将用参数格式化，这个字符串必须显示在侧边栏上。您希望它在每次执行后消失，还是希望日志保持不变？我要求对于您正在谈论的冗余，如果您希望每次都显示日志，日志必须清除，否则您将像现在一样拥有它。

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