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

Question

我有一个闪亮的加载微调器，其实现类似于 this 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。

我不会提供sn-ps的代码，看你的代码如何集成，但会提供伪代码，让你了解如何使用：

// 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') 来确定何时显示它，所以无论应用“闪亮忙碌”类，只要延迟它一秒钟之类的。