Question

我有一个闪亮的加载微调器，与t his answer类似地实现：

conditionalPanel(condition="$('html').hasClass('shiny-busy')",
                 tags$div("Loading...",id="loadmessage")
)



runApp(list(
  ui = pageWithSidebar(
      headerPanel("Test"),
         sidebarPanel(
           tags$head(tags$style(type="text/css", "
             #loadmessage {
               position: fixed;
               top: 0px;
               left: 0px;
               width: 100%;
               padding: 5px 0px 5px 0px;
               text-align: center;
               font-weight: bold;
               font-size: 100%;
               color: #000000;
               background-color: #CCFF66;
               z-index: 105;
             }
          ")),
           numericInput('n', 'Number of obs', 100),
           conditionalPanel(condition="$('html').hasClass('shiny-busy')",
                            tags$div("Loading...",id="loadmessage"))
         ),
         mainPanel(plotOutput('plot'))
  ),
  server = function(input, output) {
    output$plot <- renderPlot({ Sys.sleep(2); hist(runif(input$n)) })
  }
))

我遇到的问题是装载机一直都会出现，即使闪亮的时间只有几分之一秒。这导致应用程序一直闪烁。有没有办法在条件面板上基本设置一个延迟，以便微调器只在页面忙碌一秒后出现？

Answer 1

如果我理解正确，那么任务是在“忙碌”的某些延迟之后显示特定的班级和“忙”信息。旋转器必须仅显示繁忙时间（可能长于一秒）。

使用debounce概念可以轻松实现这一点。它在许多库中都有实现，例如lodash debounce implementation。

我不会提供代码片段，它取决于如何集成到您的代码中，但会提供伪代码，以便您了解如何使用它：

// flag of busyness
var isBusy = false;

// ...
// operation in progress, start the counting
isBusy = true;
_.debounce(showSpinner, 1000, {
   'trailing': true             // we need to trigger only when 1 seconds interval passed from last iteration
}));

// ... when done
hideSpinner();

// will be debounced after 1 second interval, and if still busy - the spinner will be shown
var showSpinner = function() {
    if (isBusy) {
        $('selector').addClass('shiny-busy');
    }
}

var hideSpinner = function() {
   isBusy = false;        // our external variable is used
   if ($('selector').hasClass('shiny-busy')) {
       $('selector').removeClass('shiny-busy');
   }
}

伪代码只是为了说明这个概念，但希望它能解释你如何使用它。

Answer 2

我遇到了这个包：shinysky。（here's the github）

它有一个busyIndicator元素，您可以设置在显示之前应该等待的时间，您只需将busyIndicator(wait=1000)添加到ui.R。

您还可以通过在R中运行busyIndicator来查看函数的代码，它基本上是使用setTimeout的一些js代码。

Answer 3

我有点困惑我正在看的东西，但总的来说，看起来你依靠$('html').hasClass('shiny-busy')来确定何时展示它，所以无论是什么应用了＃34;闪亮繁忙＆＃ 34;上课，只需将它延迟一秒或其他任何内容。

闪亮的加载微调器显示太频繁

3 个答案: