javascript - Shiny 的加载微调器显示得太频繁

Question

我有一个 Shiny 的加载微调器，它的实现类似于 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)) })
  }
))

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

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');
   }
}

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