none
Scroll automatico com javascript usando setTimeout para definir velocidade, setTimeout soma valores se botão for clicado mais de uma vez RRS feed

  • Pergunta

  • Boa tarde, 

    Eu comecei na área de Desenvolvimento tem mais ou menos uns dois meses e acabei conseguindo um estágio na área. O que acontece, estou tentado consertar alguns erros em um projeto que já estava pronto. No meu problema atual, existe um scroll automatico na pagina (ele deveria rolar a pagina sozinho, com tres botões tipo checkbox indicando a velocidade em que ele deveria andar: "Parado" "Medio" e "Rapido". 

    As velocidades estão sendo determinadas por javascript através desse código:

         

    <script language="text/javascript" type="text/javascript">

                function pageScrollParado() {
                    clearTimeout(scrolldellay); 
                }
                function pageScrollMedio() {
                    window.scrollBy(0, 1);
                    scrolldellay = setTimeout('pageScrollMedio()', 300);
                    scrolldellay.valueOf
                }
                function pageScrollRapido() {
                    window.scrollBy(0, 1);
                    scrolldellay = setTimeout('pageScrollRapido()', 100);
                }

    </script>

     <input id="botaoStop" type="button" value="stop" onclick="pageScrollParado()" style="display:none"/>
     <input id="botaoMedio" type="button" value="Medio" onclick="pageScrollMedio()" style="display:none"/>
     <input id="botaoRapido" type="button" value="Rapido" onclick="pageScrollRapido()" style="display:none"/>

    e sendo chamadas aqui:

    <div class="scroll" align="center">
            <asp:RadioButton ID="rbtParado" runat="server" GroupName="conteudo" Text="Parado"
                Font-Names="verdana" Font-Bold="True"
                Font-Overline="False" Font-Size="8pt" AutoPostBack="false" 
                onClick="javascript:document.frames['ctl00_MainContent_iframeConteudo'].form1.botaoStop.onclick(); " />
            <asp:RadioButton ID="rbtMedio" runat="server" GroupName="conteudo" Text="Médio" 
                Font-Names="verdana" Font-Bold="True" Font-Overline="False" Font-Size="8pt" AutoPostBack="false"
                onClick="javascript:document.frames['ctl00_MainContent_iframeConteudo'].form1.botaoMedio.onclick(); " />
            <asp:RadioButton ID="rbtRapido" runat="server" GroupName="conteudo" Text="Rápido" AutoPostBack="false"
                Font-Names="verdana" Font-Bold="True"
                onClick="javascript:document.frames['ctl00_MainContent_iframeConteudo'].form1.botaoRapido.onclick();"
                Font-Overline="False" Font-Size="8pt" />
        </div>

    O problema aqui é o seguinte: o setTimeout usado no javascript funciona direito, se o botão "Medio" ou "Rapido" for clicado somente uma vez. Se for clicado mais de uma vez, ou o outro botão for clicado depois que um deles já tiver sido clicado, ele cria outro setTimeout que se junta ao primeiro e a velocidade de rolagem é somada ao invés de alterada.  Da mesma forma, como tem mais de um setTimeout rodando, quando se clica no botão "Parado" é preciso clicar nele na mesma quantidade de vezes em que se clicou nos outros para que ele desfaça os setTimeout um a um. 

    Gostaria de saber se tem como o setTimeout contar sempre como se tivesse sido "ativado" apenas uma vez, para que os comandos não se sobreponham.... nada do que eu tentei até agora funcinou.

    Agradeço desde já se alguém puder ajudar.

    Raiana Ladeira

    terça-feira, 28 de agosto de 2012 18:45

Respostas

  • Raiana, tente o seguinte código:

     var scrolldellay = setTimeout('pageScrollParado()', 0);
    
            function pageScrollParado() {
                clearTimeout(scrolldellay);
            }
            function pageScrollMedio() {
    
                window.scrollBy(0, 1);
                clearTimeout(scrolldellay); //Zera o timeout, define o novo valor
                scrolldellay = setTimeout('pageScrollMedio()', 300);
                scrolldellay.valueOf
            }
            function pageScrollRapido() {
                window.scrollBy(0, 1);
                clearTimeout(scrolldellay); //Zera o timeout, define o novo valor
                scrolldellay = setTimeout('pageScrollRapido()', 100);
            }

    O problema com o seu código é que toda vez que é clicado em Médio ou Rápido, ele chama a função setTimeout e vai incrementando o tempo dentro da própria função.
    Para resolver, definimos a variável scrolldellay antes de iniciar a execução com timeOut de 0 (zero) milisegundos
    E agora fazemos um clear do timeOut antes de definir o valor Médio ou Rápido, resolvendo o problema do incremento.

    Acredito que isso resolva, porém para melhorar o seu código recomendo que você dê uma olhada na função setInterval (chama uma função f de tempos em tempos dado um intervalo n)

    Espero que tenha ajudado!

    • Marcado como Resposta RaianaLadeira quarta-feira, 29 de agosto de 2012 13:46
    terça-feira, 28 de agosto de 2012 20:29

Todas as Respostas

  • Raiana, tente o seguinte código:

     var scrolldellay = setTimeout('pageScrollParado()', 0);
    
            function pageScrollParado() {
                clearTimeout(scrolldellay);
            }
            function pageScrollMedio() {
    
                window.scrollBy(0, 1);
                clearTimeout(scrolldellay); //Zera o timeout, define o novo valor
                scrolldellay = setTimeout('pageScrollMedio()', 300);
                scrolldellay.valueOf
            }
            function pageScrollRapido() {
                window.scrollBy(0, 1);
                clearTimeout(scrolldellay); //Zera o timeout, define o novo valor
                scrolldellay = setTimeout('pageScrollRapido()', 100);
            }

    O problema com o seu código é que toda vez que é clicado em Médio ou Rápido, ele chama a função setTimeout e vai incrementando o tempo dentro da própria função.
    Para resolver, definimos a variável scrolldellay antes de iniciar a execução com timeOut de 0 (zero) milisegundos
    E agora fazemos um clear do timeOut antes de definir o valor Médio ou Rápido, resolvendo o problema do incremento.

    Acredito que isso resolva, porém para melhorar o seu código recomendo que você dê uma olhada na função setInterval (chama uma função f de tempos em tempos dado um intervalo n)

    Espero que tenha ajudado!

    • Marcado como Resposta RaianaLadeira quarta-feira, 29 de agosto de 2012 13:46
    terça-feira, 28 de agosto de 2012 20:29
  • Ohhhhh! Funcionou! 

    Então como eu estava chamando a variavel dentro de cada função ele não estava reconhecendo a variavel da outra função quando eu tentava limpar né? 

    Muito obrigada mesmo. Vou dar uma olhada no SetInterval que você disse.

    Muito obrigada de novo. 


    quarta-feira, 29 de agosto de 2012 13:46
  • Na verdade ele reconhecia sim mas sempre incrementava

    Ex:

    Clicou em médio = Timeout = 300

    Clicou em rápido = Timeout = 300 + 100

    E só zerava quando clicava em Parar.

    Atualmente:

    Clicou em médio -> Zera o Timeout -> Timeout = 300

    Clicou em rápido -> Zera o Timeout -> Timeout = 100

    Estamos aqui pra ajudar, não deixe de perguntar quando tiver dúvidas!

    -------------------------

    Tiago Saraiva

    quarta-feira, 29 de agosto de 2012 13:54
  • Ahhhh... entendi... mas ai nesse caso, ao se clicar em parar ele não deveria parar tudo de uma vez? Porque ai ele estaria zerando um setTimeout só com valor incrementado, não? Mas eu precisava clicar em parar o mesmo tanto de vezes que o valor foi incrementado...

    Obrigada de novo ^^

    quarta-feira, 29 de agosto de 2012 14:15