selectタグのonchange属性で指定されたjavascript関数を一度実行されたら、３秒間隔をあけるようにしたい

Question

selectタグのonchangeにjavascriptの関数を設定しているのですが、
これが、一度実行されると次の実行まで、三秒ほど間隔をあけたいです。

<select name="test" onchange="test();">
<option value=1>1</option>
<option value=2>2/option>
<option value=3>3</option>
<option value=4>4</option>
</select>

何かいい方法が、あれば教えていただきたいです。
よろしくお願いします。

Comments

[m.ts10806]

どのような経緯・背景・目標があって導入されようとしていますか？「三秒ほど間隔を」とのことですが、「3秒以上たたないと実行できないように」なのか「3秒たつと自動で実行」なのかでいうとどちらでしょうか。　また、一部 optionタグの閉じ部分が正しくなっていませんが、こちらは転記ミスですか？

[kyopee233]

optionタグが非常に多く、それらをキーボードの下矢印をおしっぱなしのような状態で高速に切り替えるとサーバーへの負荷が重くなってしまうので、それを避けたいです。なので、一度実行すると「3秒以上たたないと実行できないように」にしたいです。説明不足で申し訳ないです。optionタグについては転記ミスです。

[yambejp]

selectのname「test」と呼び出す関数「test」は場合によって競合するので極力別名にするのをおすすめします

[papinianus]

仕様なんですが、optionを↓やマウスのスクロールで連続的に変化させたときにサーバに到達してよいのですか？なんか処理が根本的に間違っていませんか？

[m.ts10806]

onchangeで例えばajaxなどでサーバーサイドにアクセスしない限りはあくまでクライアントサイドの出来事なので負荷がかかるのはその利用者の端末だと思います。それに3秒って結構長いので、yambejpさんも仰っていますが使いづらくて仕方ないかなと。私の回答も含めていずれの回答でもおおよそ解決は可能かと思いますが、余程重たい処理をしないのであればもうちょっと別の手段を考えた方がいいかもしれません。

Answer 1

一度実行されると次の実行まで、三秒ほど間隔をあけたいです。

質問者さんが本当に知りたいのはこれですか？
[Javascript] ユーザーが入力を停止するまで.keyup（）ハンドラーを遅延させる方法

これは「delayedCall」という技術で、「delayedCall JS」みたいなワードで検索をかけるといくつかヒットします。

---

そうではなく、単純に質問文の内容で知りたければ、
isTesting = falseみたいな「実行中だよ」と知らせてくれる変数を用意すればうまくいくでしょう。

var isTesting = false;
function test() {
  // 1行目にこれを仕込んでおく
  if (isTesting) return;
  isTesting = true;

  // 元々あった処理

  // 3行経過したらisTestingを取り下げる
  setTimeout(function(){ isTesting = false; }, 3000);
}

---

【おまけ】更に凝った実装にしてみる

test関数はシンプルに保ちたいなぁと思うのでラッピングしてみました。

var delay = function (fn, time) {
  var isDoing = false;
  return function () {
    if (isDoing) return;
    isDoing = true;
    fn();
    setTimeout(function(){ isDoing = false; }, time);
  }
}
var test = delay(function () {
  console.log('do test');
}, 3000);

test(); // "do test"が出力
test(); // すぐに再実行したので何も出力されない
setTimeout(test, 3500); // 3秒程経ってから"do test"が出力された

Comments

[m.ts10806]

あ…フラグ切り替えたいだけならfunction用意しなくて良かったですね^^;

Answer 2

ひとまず思うところで回答してみます。

「3秒以上たたないと実行できないように」

var action_flg = true;

function test(){
  if(action_flg){
      action_flg = false;
      console.log("yes");
      setTimeout(setaction, 3000);
  }else{
      console.log("no");
  }
}
var setaction = function(){
    action_flg = true;
} 

フラグを1つ用意しておき実行時にfalseに切り替え、setTimeout()で任意の時間経過後そのフラグを切り替えます。
動作確認のためconsole.log("no");を入れていますが、「何もさせたくない」場合はこのelseの分岐は入れなくても良いです。またはreturnだけ書いておいてください。

参考まで。

Comments

[miyabi-sun]

testとsetactionの関数宣言が揺れてますね。
巻き上げ的な話でこれ動きますか？多分大丈夫じゃないかなぁと思いますがちょっと自信ないです

[m.ts10806]

Chrome最新で動作確認済みです。
関数宣言の揺れについては私の癖みたいなもので、onchangeのようにHTMLから直で呼び出されるところについてはこのように書いてしまってますね・・。

[miyabi-sun]

おお、動くんですね。ちゃんと動作確認しててGJです。

[m.ts10806]

動くか自信がないものは「※未検証です。実装イメージだけもってください」とつけるようにしています。（たぶんそこちゃんと見られている質問者さん少ないですけど）

Answer 3

間違った項目を選んでしまった場合、死ぬほどストレスかかるので
やめたほうがいいと思いますが・・・
またキーボードから操作するときとかも、1から4まで変更するのに
2でも3でも3秒ずつ待たされるのは相当なクソ仕様です

それをおいておいて
単純にselectを移動できないようにするにはdisabledにすれば
変更はできなくなりますね

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('[name=test]').addEventListener('change',function(e){
    var t=e.target;
    t.disabled=true;
    setTimeout(function(){t.disabled=false;},3000);
  });
});
</script>
<select name="test">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
</select>