Edit in JSFiddle

// setTimeout 함수는 한번만 실행되기때문에 반복실행하려면 재귀적 호출이 필요함
// 즉시실행함수로 한번 실행
var timerID1 = null;
var showTime = null;
(showTime = function() {
  var d = new Date();
  var clock = document.getElementById("clock");
  clock.innerHTML = d.toLocaleString();
  timerID1 = setTimeout(showTime, 1000); // 1초후에 실행
})();

function toggle() {
  var me = event.target;
  if (timerID1) {
    clearTimeout(timerID1);
    timerID1 = null;
    me.innerHTML = "다시시작";
  } else {
    me.innerHTML = "일시중지";
    showTime();
  }
}

// setInterval
var timerID2 = null;

function myMove() {
  if (timerID2) {
    clearInterval(timerID2);
    timerID2 = null;
    return; // 타이머 작동중이라면 무시
  }
  var elem = document.getElementById("animate");
  timerID2 = setInterval(frame, 50);

  function frame() {
    var pos = elem.style.top;
    pos = pos ? parseInt(pos) : 0;
    if (pos >= 180) {
      clearInterval(timerID2);
      timerID2 = null;
      elem.style.top = '0px';
      elem.style.left = '0px';
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}

<h4>setTimeout</h4>
<button type="button" onclick="toggle()">일시중지</button>
<p id="clock"></p>
<hr>
<h4>setInterval</h4>
<p>
  <button type="button" onclick="myMove()">Click me</button>
</p>
<div id="container">
  <div id="animate"></div>
</div>

#container {
  width: 200px;
  height: 200px;
  position: relative;
  background: yellow;
}

#animate {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}