setTimeoutでボタン連打されたときの対策

ボタンとかを押して何秒か後に実行したい場合にsetTimeout使う場合ありますよね。
いったんclearTimeoutで、setTimeoutメソッドの処理を停止して、連続でボタンをクリックされたときの対策ができます

See the Pen setTimeoutでボタン連打されたときの対策 by takapen (@takapen) on CodePen.

ボタン01
ボタン02

.btn {
  margin: 20px;
  padding: 20px;
  display: inline-block;
  cursor: pointer;
}
#btn01 {
  background: #27b5ec;
}
#btn02 {
  background: #c9d210;
}

// やばい
$('#btn01').on('click',function(){
  setTimeout(function(){
    console.log('連打されるとやばい');
  }, 1000);
});

// だいじょぶ
var timeoutId;
$('#btn02').on('click',function(){
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function(){
    console.log('連打されても1回だけなので安心');
  }, 1000);
});