Stopping interval from file where is interval set

Question

If I have files called index.php and fetch.php

index.php contains:

<script>
    $(document).ready(function(){

    setInterval(function(){
        $('#fetch').load('fetch.php')
    }, 1000);

});
</script>
<div id="fetch"></div>

And fetch.php contains:

 $sql = "SELECT * FROM posts ORDER BY id DESC LIMIT 20";
    $result = $con->query($sql);

    if ($result->num_rows > 0) {

        while($row = $result->fetch_assoc()) {

           echo '

               <div>'.$row['post'].'</div><textarea id="comment" placeholder="Comment"></textarea><button id="btn">Comment</button>
';

    }}

I have a problem here, Interval is reloading every 1s and whenever I click on text area it just get reloaded as well. Is there any way to stop interval inside index.php by clicking on text area from code.php and then by button setting it back...

I have been working on click on text area to store into db the word commenting and set it here as nothing:

setInterval(function(){
            $('commenting').load('fetch.php')
        }, 1000);

and after the button click set it back to

setInterval(function(){
            $('#fetch').load('fetch.php')
        }, 1000);

But it also needs reload whole index.php page to change $('#fetch') to $('commenting')

So I am wondering is there any way to stop interval from file that is included inside that interval?

I guess it's better to use `$.ajax` in this case rather than `load()` — Chay22, Apr 12 '16 at 12:24
Yes, `clearInterval()` but you would probably be better off if you use a timeOut instead and only set a new one if your conditions are met. Intervals can lead to overlapping requests. — jeroen, Apr 12 '16 at 12:24

score 2 · Accepted Answer · answered Apr 12 '16 at 12:24

2

You can stop/start the interval when the textarea gets/loses focus. Try this:

$(document).ready(function() {
    var timer; 

    function startInterval() {
        timer = setInterval(function(){
            $('#fetch').load('fetch.php')
        }, 1000);
    }

    $('#fetch textarea').on({
        focus: function() {
            clearInterval(timer);
        },
        blur: function() {
            startInterval();
        }
    });

    startInterval(); // on load
});

I'm assuming from the code structure that you're building a chat system. If so you should look in to using websockets as AJAX polling is very server-intensive and doesn't scale well.

answered Apr 12 '16 at 12:24

Rory McCrossan

331,213
40
305
339

Can I set it on click and clearInterval and then on pressed enter as key 13 on the textarea to startInterval? – StupidProgrammer Apr 12 '16 at 12:27
I don't quite understand all of that, but you can certainly start the interval again by calling the function when the enter key is pressed. To do that hook up the `keypress` event and listen for keycode 13. More info: http://stackoverflow.com/questions/979662/how-to-detect-pressing-enter-on-keyboard-using-jquery – Rory McCrossan Apr 12 '16 at 12:30
Its for comments on posts I made chat with ajax php and mysqli... But its different because on chat its only text and textarea is moved from loading div but here comments are inside loading div... with likes and other things ... So I dont want to reload every time to get like update or post edit or something – StupidProgrammer Apr 12 '16 at 12:30
I know that I just asked can I do just this change from your code : ('#fetch textarea').on({ click: function() { clearInterval(timer); }, keypress(function(event) { var key = (event.keyCode ? event.keyCode : event.which); if (key == 13) { startInterval(timer);} }); – StupidProgrammer Apr 12 '16 at 12:32
@RoryMcCrossan basically I didn't know this is possible as my nick says I am little knowless... $('#fetch textarea') So can I do it for anything inside that file that is inside fetch div or? I am thinking can I say like $('#fetch #comment') or $('#fetch #button1') etc? – StupidProgrammer Apr 12 '16 at 12:39

score 0 · Answer 2 · answered Apr 12 '16 at 12:26

You are looking for the function clearInterval().

Set your interval in a variable, then clearInterval() on it when you need to.

<script>
    $(document).ready(function(){

      abc = setInterval(function(){
        $('#fetch').load('fetch.php')
      }, 1000);


      // Conditions bla bla bla
      clearInterval(abc);
    });
</script>

Stopping interval from file where is interval set

2 Answers2