1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to pause and resume an interval

Discussion in 'JavaScript' started by jasperschellekens, Jan 10, 2019.

  1. #1
    I am making a browser game where you sail with ships. You are looking from the top as in gta 1 and 2. So when you move to a direction, there is an animation that sails the ship to about 50 px to its direction. This animation lasts 5 seconds. To load the grid data i have a timer that refreshes the data every second but that is where those two conflict. After a second the animation gets cut of by the timer that loads the grid data.
    I have tried this, but it doesn't stop the timer:
    
    <script>
      function myMoveUp() {
        var elem = document.getElementById("myAnimationUp"); 
        var pos = 0;
        var id = setInterval(frame, 50);
        Clock.pause();
        function frame() {
          if (pos == 105) {
            clearInterval(id);
            Clock.resume();
          } else {
            pos++;
            elem.style.bottom = pos + 'px';
          }
        }
        MoveShip();
      }
    </script>
    <script>
    // the timer we want to stop for a few seconds
        var Clock = {
          totalSeconds: 0,
    
          start: function () {
            var self = this;
    
            this.interval = setInterval(function () {
              self.totalSeconds += 1;
    
              $("#hour").text(Math.floor(self.totalSeconds / 3600));
              $("#min").text(Math.floor(self.totalSeconds / 60 % 60));
              $("#sec").text(parseInt(self.totalSeconds % 60));
              $('#ShowGridData').load('data/griddata.php');
            }, 1000);
          },
    
          pause: function () {
            clearInterval(this.interval);
            delete this.interval;
          },
    
          resume: function () {
            if (!this.interval) this.start();
          }
        };
    
        Clock.start();
    
        $('#pauseButton').click(function () { Clock.pause(); });
        $('#resumeButton').click(function () { Clock.resume(); });
      </script> 
    
    Code (markup):

     
    jasperschellekens, Jan 10, 2019 IP
  2. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #2
    I got it working. It was a gramar error. Now i wonder. I have this button that calls myMoveUp(). How do i make it that after i have pressed the button i can't click it anymore untill the animation is finished? If you spam click the button now it looks glitchy. Can i avoid the script being called if it has already been called?
     
    jasperschellekens, Jan 10, 2019 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #3
    You can hide the button or disable it once the sleep starts and enable it in the resume function
     
    sarahk, Jan 10, 2019 IP
  4. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #4
    Thank you for your reply.
    I like the idea of the button getting hidden so it can't be clicked.
    Now i have this code but it doens't work?
    It hides the button for only a split second.

    
    <script>
    pause: function () {
            clearInterval(this.interval);
            delete this.interval;
            $("#sail_btn").click(function(){
              $("#sail_button").hide();
            });
          },
    
          resume: function () {
            if (!this.interval) this.start();
            $("#sail_btn").click(function(){
              $("#sail_button").show();
            });
          }
    </script>
    // 1 of 4 buttons, they are all the same except the function it calls will be different.
    <div id="sail_btn"><button type="submit" class="lst" id="sail_button" name="login_user" href="javascript:void(0)" onclick="myMoveUp()">Sail</button></div>
    
    Code (markup):
     
    Last edited: Jan 11, 2019
    jasperschellekens, Jan 11, 2019 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #5
    It needs to be part of the if !this.interval, like this

    
    resume: function () {
    if (!this.interval){
     this.start();
    $("#sail_button").show();
    }
     $("#sail_btn").click(function(){
     $("#sail_button").show();
    });
    }
    Code (markup):
     
    sarahk, Jan 11, 2019 IP
  6. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #6
    thanks
     
    jasperschellekens, Jan 11, 2019 IP