clearTimeout() が効かない場合

###実現したいこと
再生クリックでスタートしたsetTimeout()を、停止クリックで全て解除したいです。

つまりclearTimeout()の正しい使い方についてお尋ねしたいと思います。

宜しくお願い致します。

###発生している問題
停止をクリックしてもそれ以降のイベントが発生してしまう。

###該当のソースコート
再生と停止は同じボタンの.is_clickの有無で決まります。

.is_clickが有るもの（つまり停止ボタン）をクリックしたときはstop()が実行され各イベントにclearTimeout()をかけているのですが…

それでもコンソールへの出力が止まってくれずイベントが発生してしまうという状況です。

<button type="button">start</button>

<script>

// 開始
$(document).on('click','button:not(.is_click)', function(){
  $(this).addClass('is_click');
  stop();
  start();
});

let time1, time2, time3, time4;	
function start(){

  $('button').text('stop');
  time1 = setTimeout(function(){
    console.log('time1');	
  },1);

  time2 = setTimeout(function(){
    console.log('time2');			
  },2000);

  time3 = setTimeout(function(){
    console.log('time3');		
  },5000);
  
}

// 停止
$(document).on('click','button.is_click', function(){
  $(this).removeClass('is_click');
  stop();		
});

function stop(){
  clearTimeout( time1, time2, time3, time4 );
  $('button').text('start');
}
</script>

###試したこと
stop()でclearTimeout()をかけたとき、さらに各イベントにfalseを設定しました。

そしてstart()でif(time1){}のようにし「もしイベントがtrueなら実行」という風にしたつもりですが、これではうまくできませんでした。

他にどのような方法があるか、正しい処理を教えて頂けませんでしょうか。


// 開始
$(document).on('click','button:not(.is_click)', function(){
  $(this).addClass('is_click');
  stop();
  start();
});

let time1, time2, time3, time4;	
function start(){

  time1 = time2 = time3 = time4 = true;

  if(time1){
    $('button').text('stop');
    time1 = setTimeout(function(){
      console.log('time1');	
    },1);
  }

  if(time2){
    time2 = setTimeout(function(){
      console.log('time2');			
    },2000);
  }

  if(time3){
    time3 = setTimeout(function(){
      console.log('time3');		
    },5000);
  }		
  
}

// 停止
$(document).on('click','button.is_click', function(){
  $(this).removeClass('is_click');
  stop();		
});

function stop(){
  clearTimeout( time1, time2, time3, time4 );
  time1 = time2 = time3 = time4 = false;
  $('button').text('start');
}
</script>