1

私はこれを理解するのにひどい時間を過ごしています。フォームがあります。

<form id="form1" .. target="right" action="blablah">
<input .. />
<input type="submit" id="ycsubmit" onclick="..." value="Go!" />
</FORM>

送信時に実行する必要がある関数があります: ycClick();

ycClick() が実行されたら、onClick を 30 秒間 null に切り替えてから、30 秒後にもう一度押すと ycClick() をもう一度実行し、さらに 30 秒間無効にする必要があります。私はこの100の異なる方法を試しましたが、これは私が今持っているものです:

function ycClick(){
...
}

var isEnabled = true;

function toggleSubmit() {
    if (isEnabled = true) {
        document.getElementById("ycsubmit").onclick = null;
    } else {
        document.getElementById("ycsubmit").onclick = timer();
    } 
//isEnabled = !isEnabled;
}

function timer(){
ycClick();
toggleSubmit();
setTimeout("toggleSubmit()", 30000);
}

次に、timer(); をトリガーするように onclick を設定しました。そのままで、これは timer() をオフに設定し、ycClick() をオフに設定してから onclick を null に切り替えますが、30 秒後に元に戻すことはありません。私はそれがこの行と関係があると思います：

isEnabled = !isEnabled;

しかし、削除しても違いはなく、まったく同じように動作します。

4

3 に答える 3

2

コードを改善する方法はたくさんあります。単純なエラーもあれば、DOM および JavaScript ランタイムのその他の機能について学ぶ必要があることを示しているものもあります。気づいたことを順番に以下に記します。

エラー

  • テスト中によくある間違いを犯しましたif (isEnabled = true){。シングル=は割り当てであるため、コードは isEnabled が true かどうかをテストしていません。代わりに、常に である割り当ての結果をテストしていますtrue。が現在真である===かどうかをテストするには、トリプル イコールを使用します。( double equals も表示されますが、この演算子は予期しない影響を与える可能性があり、厳密性も低いため、ほとんど使用しないでください。)isEnabled==
  • の行document.getElementById("ycsubmit").onclick = timer();では、 の後の括弧は省略してくださいtimer。かっこを使用すると、その関数への参照を割り当てる代わりに、関数を実行しています。timeronclick メソッドは の戻り値に設定されています。これは、ステートメントをtimer指定していないため、 になります。returnundefined
  • isEnabledfalse に設定することはありません。isEnabled = !isEnabled現在のセットアップでは、ラインをそのままにしておく必要があります。

アプローチの問題

  • 上記の回答は、フォーム送信を無効にするためのより良いアプローチを示しています。onclick ハンドラを設定および設定解除しようとしないでください。代わりに、ハンドラー自体の内部で繰り返されるクリックを処理する必要があります。実際には、もっと単純な場合があります。このフォームが JavaScript によって検証されたり、AJAX を介して送信されたりするのではなく、通常どおり送信されている場合は、入力を無効にするだけで、再度有効にすることを心配する必要はありません。サーバーはフォーム送信の処理を完了します。ページが消えるか、有効な送信ボタンでリロードされます!
  • フォームの送信をブロックするために、送信ボタンでクリック イベントを使用しないでください。フォームには、この目的のために送信イベントがあります。一部のブラウザーでは、リターン キーを使用してフォームを送信できます。これにより、クリック イベントがバイパスされます。フォームの送信イベントを購読する必要があります。
  • そもそも「onclick」属性を使用してイベント ハンドラーを割り当てるべきではありません。DOM 要素にイベント リスナーを追加する必要があります。これにより、より柔軟なイベントが実現されます。たとえば、複数のイベントを同じ要素に割り当てることができ、イベントが実行されるスコープの処理が改善されます。最後に、ドキュメントのプレゼンテーションと動作をそのコンテンツから分離します。これは、jQuery やその他の一般的なライブラリでの実践です。これにはより多くのコーディングが必要であることは理解していますが、それが jQuery のような操作ライブラリが存在する理由です。あなたはそれを試してみるべきです！
于 2012-06-26T01:04:52.183 に答える
1

あなたはこれを行うことができます：

function ycClick () {
    var timestamp = +( new Date );
    if ( ycClick.timestamp && timestamp - ycClick.timestamp < 30000 ) return;
    ycClick.timestamp = timestamp;

    // the actual code of the function
}

ライブデモ: http://jsfiddle.net/znKRC/7/

私のデモでは、ボタンを繰り返しクリックすると、関数の 2 番目の部分が 3 秒ごとにしか実行されないことがわかります。したがって、上記の関数の最初の 3 行は、後続のコードが最後の 30 秒間実行されていない場合にのみ実行されるようにします。

于 2012-06-26T01:13:43.040 に答える
0

簡単な答えは、JavaScript の「setTimeout(function(){},t)」を使用することです。関数は実行するコマンドで、t = ミリ秒単位の時間です。

また、要素を非表示にするためにオブジェクト スタイルを設定することもできます。

于 2014-05-12T17:58:09.190 に答える