How to call function in JS only once

Asked

Viewed 382 times

3

Well, I have the following problem: I’m building a chat page, I’m already getting good messages, only when entering this chat page I wanted to automatically descend to the bottom of the page, in case, where would be the latest messages.

Follows the code:

function ajax(){
    var req = new XMLHttpRequest();
    req.onreadystatechange = function(){
        if (req.readyState == 4 && req.status == 200) {
            document.getElementById('mensagens').innerHTML = req.responseText;
        }
    }

    req.open('GET', 'mensagens.php', true);
    req.send();
    final();
}

setInterval(function(){ajax();}, 1000);

var x = 0;

function final(){
    if(x == 0){
        parent.scroll(0, 10000);
        x++;
    }
}

If I remove this if (from the final function) leaving only Parent.scroll(0, 10000); it will go down at the end of one in a second, but I want to go only at 1° once the page is accessed. Is there any other way to stop this function than the one I’m using? (Detail, this form used by me is not working and, also, could not stop it with a Return or break).

javascript function

4 answers

1


Use window.scrollTo() after a setTimeout:

document.addEventListener("DOMContentLoaded", function(){
   setTimeout(function(){
      window.scrollTo(0, 10000);
   }, 10);
   setInterval(ajax, 1000);
});

function ajax(){
   // aqui o código do ajax
}
Início
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Fim!

  • It didn’t work either

  • Thank you all for your help, but I’m giving up this function. I’m not very good with JS even, so I’ll just leave a floating button to go down at the end when clicked, it’s not quite what I wanted, but it will work at least.

  • Run the example and see that it works. But try the following: increase the time of 10 for 500, or increase to 1000.

  • Man, thanks a lot. Your code solved

0

Dude, you set a setInterval of 1 in 1 second, it will always go to the end of the chat. Only thing you need to do for it to run once only when opening the page, is to take the setInterval and directly run the function with the ajax()

  • Well, I need setInterval to update the chat messages. I’ve also tried calling the final function on an onload on the body, neither. I don’t know what to do, since I already simulated a click of an invisible button so that it goes to the end and, yes, with a normal click of that button it goes to the end of the page.

  • Then use the end() straight and remove it from the ajax() function. You need the setInterval just to update the messages, you don’t need to go down.

  • Dude, it didn’t work with an onload on the body or with a.onload window on JS, but if you have another form tell me there, because in these other methods it simply ignores the existence of a function.

  • Thank you all for your help, but I’m giving up this function. I’m not very good with JS even, so I’ll just leave a floating button to go down at the end when clicked, it’s not quite what I wanted, but it will work at least.

0

You can use the onload function in the page’s HTML:

<body onload="final()">

It will run soh when the user enters the page, then Voce has to remove the call in the Ajax code not to load all the time:

function ajax(){
    var req = new XMLHttpRequest();
    req.onreadystatechange = function(){
        if (req.readyState == 4 && req.status == 200) {
            document.getElementById('mensagens').innerHTML = req.responseText;
        }
    }

    req.open('GET', 'mensagens.php', true);
    req.send();
}

Support link: https://www.w3schools.com/Jsref/event_onload.asp

  • Dude, it won’t, I’m outraged, the function is working normally, but when called via onload it doesn’t perform, nor with those hacks I used in the code at the beginning.

  • Sometimes you make a few mistakes by not using ; in the so-called type <body onload="final();">

  • I was already using ;, but as much as without it gives in it, it keeps ignoring the function.

  • I put an Alert in the final test only function itself and it ran normally, but the function to scroll it ignores in all ways

  • Try to declare the variable x within the function

  • It didn’t work either,

  • Thank you all for your help, but I’m giving up this function. I’m not very good with JS even, so I’ll just leave a floating button to go down at the end when clicked, it’s not quite what I wanted, but it will work at least.

Show 2 more comments

0

Just remove the final(); from within Ajax so that it does not go to the end of the chat every 1 second, and call the final(); after popular.

window.onload = function(){ //Quando TODO o documento for carregado. 
    function ajax(){
        var req = new XMLHttpRequest();
        req.onreadystatechange = function(){
            if (req.readyState == 4 && req.status == 200) {
                document.getElementById('mensagens').innerHTML = req.responseText;
            }
        }
        req.open('GET', 'mensagens.php', true);
        req.send();
    }
    function final(){
        ajax(); //Se certificar de que o chat está atualizado
        parent.scroll(0, 10000);
    }
    final(); //Depois de popular o chat, ir para o final.  
    setInterval(function(){ajax();}, 1000); //Atualiza a cada 1 segundo

}

  • It worked not, it simply reads the messages passed by the ajax() function and that’s it. But just a question with this your code, I should not put an onload not, right? Just use this your code?

  • Best for onload as you make sure that all HTML has been loaded and only then run Javascript.

  • @Higorcardoso updated, I put the ajax(); at the end, so when to call final() you will make sure that the content has been uploaded.

  • Didn’t work either

  • @Higorcardoso you say that the parent.scroll(0, 10000); Right? Something else, before when it was your code, was working normal ?

  • Is there an error being alerted on the console? (go to inspect element)

  • The Parent.scroll(0, 10000); is working, so much so that if I put the final function() through an onclick it works normally

  • Thank you all for your help, but I’m giving up this function. I’m not very good with JS even, so I’ll just leave a floating button to go down at the end when clicked, it’s not quite what I wanted, but it will work at least.

  • @Higorcardoso it’s okay for you to give up, but don’t take this in all cases ok ? A programmer should always be persistent and deliver what has been proposed.

Show 4 more comments

Browser other questions tagged javascript function

You are not signed in. Login or sign up in order to post.