Jump to content
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 

Edited by Matheus Tavares
Adicionar marcação para código

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By 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!
    • By 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!") } }  
    • By 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.
    • By 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á
    • By joaoooo
      Boas, é possivel usar uma funçao de callback que está dentro de um objecto ?
      Código:
      var Resources = { init: function() { this.CSSfiles = []; this.Add = Resources.Add; this.Load = Resources.Load; this.cssState = 0; }, Add: function(json) { this.CSSfiles.push(json); }, Load: function(callback) { var head = document.getElementsByTagName("head")[0] this.CSSfiles.forEach(function(file) { var ref = document.createElement('link'); ref.setAttribute('rel', 'stylesheet'); ref.setAttribute('type', 'text/css'); ref.setAttribute('async', file['async']); ref.setAttribute('href', file['file']); head.appendChild(ref); }); callback.call(); } } var obj = { Create: function(files, html, id) { this.files = files; this.html = html; this.id = id; this.Load = obj.Load; this.insertHtml = obj.insertHtml; }, Load: function() { var Resc = new Resources.init(); this.files.forEach(function(file) { Resc.Add(file, 'css'); }); Resc.Load(this.insertHtml); }, insertHtml: function(){ // just to test console.log('id ='+this.id); console.log('html ='+this.html); } } var cs = new obj.Create([{"file":"http:\/\/dev.localhost\/rsc.php?file=css\/core\/block_left.css","async":false},{"file":"http:\/\/dev.localhost\/rsc.php?file=css\/core\/blockleft.css","async":false}],'<h1>test</h1>', 'content'); cs.Load(); A callback é chamada na funçao Load do Resources e está dentro do objecto "obj".
      http://jsfiddle.net/3j7c8hjh/
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.