【javascript】一定時間操作が無かったら処理を実行させる関数

一定時間操作がなかったら自動で指定をした処理を実行する関数を作りたかった時の備忘録
setTimeout関数を使います

一定間操作がなかったら指定の処理を実行するコード

クリックしてから3秒後にアラートがでるけど、クリックしている間はカウントがリセットされ続けるコード

<script>
// ↓ クリックイベント
document.onclick = countStart;

// ↓ タイマー処理
let id;
function countStart(){
  clearTimeout(id);// タイマーストップ
  id = setTimeout(countFinish),3000);// タイマーリセット
}

// ↓ 一定時間処理がなかった時の関数
let countFinish = function() {
  alert("クリック辞めて3秒経ったよ");
};
</script>

一定時間テキスト入力がなかったら指定の関数を実行するコード

前回、oninputプロパティを使ってテキストが入力されるたびに処理を実行する備忘録を書いたんだけど、テキスト入力があるたびに処理を実行するんだと処理が重いかと思い

3秒間テキスト入力がなかったら指定の処理を実行するコード作った

<input id="text">
<script>
// ↓ 入力テキストの処理
let text = document.getElementById('text');
text.oninput = inputText;

// ↓ タイマー処理
let id;
function inputText(e){
  clearTimeout(id);// タイマーストップ
  id = setTimeout(save,3000);// タイマーリセット
  console.log(e.target.value);// 入力テキスト確認
}
// ↓ 一定時間入力がなかった時の処理
var save = function() {
  alert("保存しました");
};
</script>