AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • Início
  • system&network
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • Início
  • system&network
    • Recentes
    • Highest score
    • tags
  • Ubuntu
    • Recentes
    • Highest score
    • tags
  • Unix
    • Recentes
    • tags
  • DBA
    • Recentes
    • tags
  • Computer
    • Recentes
    • tags
  • Coding
    • Recentes
    • tags
Início / coding / Perguntas / 78997295
Accepted
Quinten
Quinten
Asked: 2024-09-18 16:40:48 +0800 CST2024-09-18 16:40:48 +0800 CST 2024-09-18 16:40:48 +0800 CST

Desabilite o botão por 5 segundos com rótulo diferente e altere depois

  • 772

Estou tentando criar uma introdução no meu aplicativo shiny usando o rintrojspacote com a introjsfunção. Meu objetivo é criar uma introdução onde o primeiro botão próximo seja desabilitado por 5 segundos e tenha um rótulo diferente como 'Aguarde 5 segundos...'. Atualmente, ele espera 5 segundos e muda de rótulo, mas não é desabilitado durante os 5 segundos. Então você ainda pode clicar nele. Aqui está um exemplo reproduzível:

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)

Saída:

insira a descrição da imagem aqui

Como você pode ver, ele cria o botão 'Aguarde 5 segundos...' que também é exibido por 5 segundos, mas não é desabilitado durante os 5 segundos. Então, eu estava pensando como podemos criar um botão que muda de rótulo após 5 segundos e é desabilitado durante os 5 segundos?

  • 1 1 respostas
  • 67 Views

1 respostas

  • Voted
  1. Best Answer
    smartse
    2024-09-18T17:47:03+08:002024-09-18T17:47:03+08:00

    O primeiro problema é que <a>os elementos não têm uma disabledpropriedade. Segundo, nextButtoné sempre NULLporque o html não é renderizado inicialmente - coloque um console.log('boop')para ver o que quero dizer. Consequentemente, você precisa procurá-lo depois que a renderização estiver completa.

    Substitua isso em depois var that = this;:

    function waitForButton() {
      var nextButton = document.querySelector('.introjs-nextbutton');
    
    if (nextButton) {
        nextButton.innerHTML = 'Wait 5 seconds for real now...';
        nextButton.classList.add('introjs-disabled');
        nextButton.style.pointerEvents = 'none'; // Disable click
      } else {
        setTimeout(waitForButton, 100); // Retry after 100ms if button is not found
      }
    }
    waitForButton()
    
    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.classList.remove('introjs-disabled');   // Enable the button after 5 seconds
        nextButton.style.pointerEvents = 'auto'; // Enable click
      }
    }, 5000); // 5 seconds delay
    
    • 3

relate perguntas

  • Adicionar número de série para atividade de cópia ao blob

  • A fonte dinâmica do empacotador duplica artefatos

  • Selecione linhas por grupo com 1s consecutivos

  • Lista de chamada de API de gráfico subscritoSkus estados Privilégios insuficientes enquanto os privilégios são concedidos

  • Função para criar DFs separados com base no valor da coluna

Sidebar

Stats

  • Perguntas 205573
  • respostas 270741
  • best respostas 135370
  • utilizador 68524
  • Highest score
  • respostas
  • Marko Smith

    Vue 3: Erro na criação "Identificador esperado, mas encontrado 'import'" [duplicado]

    • 1 respostas
  • Marko Smith

    Por que esse código Java simples e pequeno roda 30x mais rápido em todas as JVMs Graal, mas não em nenhuma JVM Oracle?

    • 1 respostas
  • Marko Smith

    Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores?

    • 1 respostas
  • Marko Smith

    Como faço para corrigir um erro MODULE_NOT_FOUND para um módulo que não importei manualmente?

    • 6 respostas
  • Marko Smith

    `(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso?

    • 3 respostas
  • Marko Smith

    Quando devo usar um std::inplace_vector em vez de um std::vector?

    • 3 respostas
  • Marko Smith

    Um programa vazio que não faz nada em C++ precisa de um heap de 204 KB, mas não em C

    • 1 respostas
  • Marko Smith

    PowerBI atualmente quebrado com BigQuery: problema de driver Simba com atualização do Windows

    • 2 respostas
  • Marko Smith

    AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos

    • 1 respostas
  • Marko Smith

    Estou tentando fazer o jogo pacman usando apenas o módulo Turtle Random e Math

    • 1 respostas
  • Martin Hope
    Aleksandr Dubinsky Por que a correspondência de padrões com o switch no InetAddress falha com 'não cobre todos os valores de entrada possíveis'? 2024-12-23 06:56:21 +0800 CST
  • Martin Hope
    Phillip Borge Por que esse código Java simples e pequeno roda 30x mais rápido em todas as JVMs Graal, mas não em nenhuma JVM Oracle? 2024-12-12 20:46:46 +0800 CST
  • Martin Hope
    Oodini Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores? 2024-12-12 06:27:11 +0800 CST
  • Martin Hope
    sleeptightAnsiC `(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso? 2024-11-09 07:18:53 +0800 CST
  • Martin Hope
    The Mad Gamer Quando devo usar um std::inplace_vector em vez de um std::vector? 2024-10-29 23:01:00 +0800 CST
  • Martin Hope
    Chad Feller O ponto e vírgula agora é opcional em condicionais bash com [[ .. ]] na versão 5.2? 2024-10-21 05:50:33 +0800 CST
  • Martin Hope
    Wrench Por que um traço duplo (--) faz com que esta cláusula MariaDB seja avaliada como verdadeira? 2024-05-05 13:37:20 +0800 CST
  • Martin Hope
    Waket Zheng Por que `dict(id=1, **{'id': 2})` às vezes gera `KeyError: 'id'` em vez de um TypeError? 2024-05-04 14:19:19 +0800 CST
  • Martin Hope
    user924 AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos 2024-03-20 03:12:31 +0800 CST
  • Martin Hope
    MarkB Por que o GCC gera código que executa condicionalmente uma implementação SIMD? 2024-02-17 06:17:14 +0800 CST

Hot tag

python javascript c++ c# java typescript sql reactjs html

Explore

  • Início
  • Perguntas
    • Recentes
    • Highest score
  • tag
  • help

Footer

AskOverflow.Dev

About Us

  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve