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

Question

我有一个闪亮的加载微调器,它的实现类似于他的答案:

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实现.

我不会提供代码片段,它取决于如何集成到您的代码中,但会提供伪代码,因此您了解如何使用它:

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

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