使用不同标签禁用按钮 5 秒，然后更改

Question

我正在尝试使用

rintrojs

包和

introjs

函数在我闪亮的应用程序中创建一个介绍。我的目标是创建一个介绍，其中第一个下一个按钮被禁用 5 秒，并具有不同的标签，例如“等待 5 秒...”。它当前等待 5 秒并从标签更改，但在 5 秒内不会禁用。所以你仍然可以点击它。这是一个可重现的示例：

library(shiny)
library(rintrojs)

ui <- fluidPage(
  introjsUI(),
  actionButton("start_intro", "Start Intro"),
  h1("Welcome to the Shiny App"),
  p("This is some description of the app.")
)

server <- function(input, output, session) {
  
  steps <- reactive({
    data.frame(
      element = c(NA, "#start_intro"),
      intro = c("Welcome to the app! This first step has a custom button.",
                "This is the start button for the intro tour."),
      position = c("bottom", "bottom")
    )
  })
  
  observeEvent(input$start_intro, {
    introjs(session, 
            options = list(
              steps = steps(),
              nextLabel = "Wait 5 seconds..." 
            ),
            events = list(
              "onbeforechange" = I("
                if (this._currentStep === 0) {
                  var that = this;
                  var nextButton = document.querySelector('.introjs-nextbutton');
                  
                  if (nextButton) {
                    nextButton.innerHTML = 'Wait 5 seconds...';  // Initial label
                    nextButton.disabled = true;                  // Disable the button
                  }
                  
                  setTimeout(function() {
                    that._options.nextLabel = 'next'; // Change label after 5 seconds
                    that._introItems[0].nextLabel = 'next';
                    var nextButton = document.querySelector('.introjs-nextbutton');
                    if (nextButton) {
                      nextButton.innerHTML = 'next';  // Update the label to 'next'
                      nextButton.disabled = false;    // Enable the button after 5 seconds
                    }
                  }, 5000); // 5 seconds delay
                }
              ")
            )
    )
  })
}
 
shinyApp(ui = ui, server = server)

输出：

如您所见，它创建了“等待 5 秒...”按钮，该按钮也显示 5 秒，但在 5 秒期间并未禁用。所以我想知道如何创建一个按钮，该按钮在 5 秒后从标签更改并在 5 秒内禁用？

Answer 1

第一个问题是

<a>

元素没有

disabled

属性。其次，

nextButton

始终是

NULL

，因为 html 最初并未呈现 - 弹出

console.log('boop')

即可明白我的意思。因此，您需要在渲染完成后寻找它。

将其替换为

var that = this;

之后：

          function waitForButton() {
            var nextButton = document.querySelector('.introjs-nextbutton');

            if (nextButton) {
              nextButton.innerHTML = 'Really wait 5 seconds...';
              nextButton.classList.add('introjs-disabled');
            } else {
              setTimeout(waitForButton, 100); // Retry after 100ms if button is not found
            }
          }
          waitForButton()

然后将

nextButton.disabled = false;

切换为

nextButton.classList.remove('introjs-disabled');