How to pause and resume an interval

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):

 

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?

 

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):

 

thanks