Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Clayton Baroboskin

Executar a mesma função seguidamente

Recommended Posts

Boa noite.

 

tenho a seguinte função de efeito de digitação:

function escrever(texto) {
      var div = document.getElementById('message-list');    
      var char = texto.split('').reverse();
      var typer = setInterval(
      function() {
        if (!char.length) return clearInterval(typer);
        var next = char.pop();
                        $("#message-list").scrollTop($("#message-list").prop("scrollHeight"));

        div.innerHTML += next;
      }, 50);

}

 

Funciona perfeitamente, mas quando preciso chama-la mais de uma vez seguidamente, o texto é misturado. Tentei com callback, mas não consegui fazer funcionar.

escrever("Texto de teste");
escrever("Outro texto de teste);

Retorna:  TOeuxttroo dtee xtteos tdee teste

Alguma idéia??

 

Obrigado.

 

Clayton 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso acontece porque você chama a função duas vezes na mesma hora, ai as duas registram para daqui 50 milesegundos escrever na div, ai passa os 50 milesegundos e as duas sai escrevendo ao mesmo tempo. 

O correto é esperar uma escrever e depois a outra começar, da para resolver isso com promise, fiz um código aqui rapidão e aparentemente deu certo, olha: https://jsfiddle.net/wessleysanttos/ws2m54jv/10/

 

Não sei se é a melhor saída, mas quando der pesquisa sobre Promises.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 06/08/2018 at 16:05, Wesley Santos disse:

Isso acontece porque você chama a função duas vezes na mesma hora, ai as duas registram para daqui 50 milesegundos escrever na div, ai passa os 50 milesegundos e as duas sai escrevendo ao mesmo tempo. 

O correto é esperar uma escrever e depois a outra começar, da para resolver isso com promise, fiz um código aqui rapidão e aparentemente deu certo, olha: https://jsfiddle.net/wessleysanttos/ws2m54jv/10/

 

Não sei se é a melhor saída, mas quando der pesquisa sobre Promises.

Wesley, acho é exatamente isso que preciso!!! 
Promise funciona como um callback, certo??
Agora duas coisas: 

Sua rotina funcionou perfeitamente no jsfiddle. Copiei e colei no meu arquivo, mas a linha "return new Promise((sucess, error) => {" acusa erro. Mas funciona!!!

Ja tinha visto Promise, mas só agora entendi o real funcionamento dele. Só ainda não consegui implementar. Veja se consegue me dar uma (outra) luz, por favor:

Tenho a rotina:

 

function escrever(texto)
     {
        var div = document.getElementById('message-list');    
        var char = texto.split('').reverse();
        var typer = setInterval(
            function() {
                if (!char.length) return clearInterval(typer);
                var next = char.pop();
                        $("#message-list").scrollTop($("#message-list").prop("scrollHeight"));
                
                div.innerHTML += next;
                }, 20);
                    atualiza_scroll();
    }

 

Só que chamo ela várias vezes durante a execução. - apenas para explicar, estou fazendo um sistema de atendimento automático. Quase um BOT, mas limitado.

 

        if (((botao.value == 'teste1'))){
                escrever("testando 1");
                escrever("testando 1 de novo");
         }

        else if (((botao.value == 'teste2'))){
                escrever("testando 2");
                escrever("testando 2 de novo");

                escrever("testando 2 mais uma vez");
         }

 

E assim por diante. Mais pra frente, terei que rodar a função mais vezes até....

 

Obrigado 

 

 

Clayton

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Leandro T.
      pessoal bom dia alguém poderia me ajudar com o FormValidation?
       
      "nomefuncionario": {
                  validators: {
                      
                  
                    notEmpty: {
                      message: "Nome completo do funcionário é obrigatório."
                    } , <=== este funciona normalmente
                      
                      callback: {  // agora o callback nao consigo fazer funcionar
                              message: 'este nome não é valido',
                              callback: function (input) {
                                  if (input.value = 'algum valor digitado') {
                                      return true
                                  } }},
                      
                      
                      
                  }
    • Por JoaoVituBR
      Olá. eu estou refazendo meu sistema de login só que eu me deparei com um problema e eu não estou conseguindo resolver!
      eu estou tentando fazer o callback na função de fora da pesquisa do mysql.

      Codigo:
      socket.on('auth_login', (data, callback) => { if (!data['user']) callback('user_fail'); if (!data['pass']) callback('pass_fail'); var Query = "SELECT * FROM usuarios WHERE user = ? OR email = ?" mysql.query(Query, [data['user'], data['user']], function(error, results) { if (error) return console.log(error); // [...] callback('value'); // [...] }); }); Quando eu dou callback dentro do mysql.query está dando o erro: this._callback.apply is not a function
      Obrigado!
    • Por gRoOvE
      Quero que quando terminar de executar o $arquivos.addEventListener("change", execute automaticamente a function showResults()..esse FileReader funciona de modo assíncrono, e eu preciso que ele tenha terminado todo o processo pra dai fazer a validação que eu preciso.
       
      Fiz um botão pra chamar o showResults(), mas gostaria que ele fosse automatico no callback.
       
      Segue meu código abaixo:
      var $arquivos = document.getElementById("arquivos"); var results = []; $arquivos.addEventListener("change", function(){ var files = event.target.files; results = []; for(var i=0; i < files.length; i++) { var file = files[i]; var reader = new FileReader(); reader.onload = (function(f) { return function(e) { results.push(e.target.result); } })(file); reader.readAsText(file); } }); function showResults() { if (results[0] === results[1]) { alert("Same files!") } else { alert("Different files!") } }  
    • Por gRoOvE
      Bom dia, como vocês fazem quando precisam fazer várias chamadas AJAX encadeadas? A forma mais simples de se fazer seria colocar o código da nova function no onSucess e assim recursivamente. Problema que as funções que serão chamadas já estão escritas em functions separadas(novaFuncaoAjax()), teria alguma forma de encadear assim?
      $.ajax({ method: "POST", url: "some.php", data: { name: "John", location: "Boston" } }) .sucess(function() { novaFuncaoAjax(); }); function novaFuncaoAjax(){ $.ajax({ method: "POST", url: "other.php", }) .sucess(function( msg ) { alert( "Hello World!" ); }); } No jQuery sei que existe o recurso Callbacks, já usei e sei que funciona. Porém estou usando um projeto legado que usa o framework Prototype e teria que fazer na mão este controle.
    • Por renpanvil
      Fala galera estou com um semi-problema aqui em um sistema que estou desenvolvendo na empresa que trabalho.
       
      Porque um Semi-problema?
      Semi problema porque o código em si está funcionando porem o PHP está printando um Warning bem grande na tela reclamando que não estou enviando um tal de Callback na minha função, enfim vou mostrar minha função e a chamada atravez do call_user_func_array();
       
      Essa é minha requisição em Ajax
      var url = $("#url").val(); //pega a url base var dados = $("#nome_do_form :input").serializeArray(); //serealiza o form var met = 'nomeMetodo'; //nome do metodo $.ajax({ type: "POST", url: url + 'controller', data: {met: met, url: url, dados: dados}, success: function (result) { $("#resultado").empty(); $("#resultado").append(result); } }); Quem recebe esse Ajax é o meu Controller através de um roteamento que vai destrinchar essa url dinamica que o Ajax passou.
      Podem ver que a variável met está me trazendo qual vai ser o nome do metodo a ser executado no controller.
       
      Segue meu controller
      $metodo = 'NomeClass::'.$_POST['met']; //nome do metodo já concatenado com o nome da classe //aqui montamos o array com os dados que o Ajax enviou no serialize for ($c = 0; $c < count($_POST['dados']); $c++) { $dados[$c] = $_POST['dados'][$c]['value']; } //Aqui nos chamamos nosso metodo dentro da função call_user_func_array //passamos dois parametros, os dados e uma conexão com o banco de dados //Nessa chamada de call_user_func_array() que ocorre nosso Warnning if (call_user_func_array($metodo, array($dados, new Config()))) { // <------------------------- echo ' Salvo em ' . date("d-m-Y") . ' - ' . date("H:i:s"); } Abaixo vou passar o código do modelo moçada mas o problema está acontecendo nessa chamada que marquei do Controller. O mais estranho é que seu chegar ali e trocar a variavel $metodo por uma string com a referencia do metodo ex('NomeClass::nomeMetodo') o warnning não aparece.
       
      Segue o Modelo
      class nomeClass { public static function nomeMetodo($dados, $mysql, $callback=null){ if($_SERVER['REQUEST_METHOD']=='POST'){ $cadastra = $mysql->conn()->prepare('INSERT INTO `tabela`(dado1, dado2, dado3) VALUES (?, ?, ?)'); if(is_callable($callback)){ echo 'Callback'; } else { return $cadastra->execute($dados); } } } } Como podem ver eu ate tentei criar o callback com um video que vi mas não funcionou, continua dando o erro, acho que ele está confundindo algum dado que estou passando com eu querer passar um callback, isso é possível.
       
      Galera deixo essa dúvida mortal com vocês, hoje estou usando um @ para não printar o warnning porque como disse a função está funcionando perfeitamente sussa.
       
      Muito obrigado desde já
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.