- - PR -
ボタン連打制御
投稿者 | 投稿内容 | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
投稿日時: 2005-09-01 18:37
返信ありがとうございます。
申し訳ないのですがボタン連打制御の2種類の違いがよくわからなかったのですが、 意図としては1つのリクエストを投げて、そのレスポンスが帰ってくる前に別のリクエストを投げる事を防ぎたいと考えています。 たぶん「1.の制御」であってると思います。 主な目的といたしまして ・2重登録を防ぐ ・サーバーの負荷軽減 です。 今まで私がテストした内容は以下の通りです。 bodyにonUnloadで制御:結局リクエストが飛びます。要件に合いません。 bodyにonBeforeUnloadで制御:リクエストを飛ばさないことは出来るが、変なダイアログがでるため要件に合いません。 bodyにonClickで制御:go()の処理が流れてからsubmittableObject_Click()が流れる。 です。 onBeforeUnloadでダイアログをカスタマイズしたり、ダイアログを出さないようにするだけでも用件は満たせます。 (F5ボタン押下のことは今回は想定外です。) なにか他によい方法があれば教えていただきたいと思います。 宜しくお願い致します。 | ||||||||||||||||||||
|
投稿日時: 2005-09-01 18:51
チャット化してきてますね。。
下記のように、Submitボタンを使用している場合は、 formのSubmitイベントを捕捉できるのでチェックできるのですが。。
困りましたね。。 識者の降臨が待ち遠しい(>_<) [ メッセージ編集済み 編集者: 葉瀬崎浩樹 編集日時 2005-09-01 18:52 ] | ||||||||||||||||||||
|
投稿日時: 2005-09-01 20:47
うーん。。 送信から再表示までの流れは大体こんな感じかと。 A:リクエスト送信 B:レスポンス待ち C:ブラウザ上のHTMLドキュメント破棄(onUnload) D:レスポンスされたHTMLの読み込み開始 E:読み込み完了 私の書いた2種類の制御とは、 以下のタイミングでの制御ついて述べたつもりです。 ■D〜E時期のボタン連打制御 1.「ドキュメントの読込み完了までボタン押下させたくない」 ■A〜B時期でのボタン連打制御 2.「送信後のレスポンス待ち時間中に、複数回ボタン連打されたくない」 認識にずれが無いか心配です。。汗
onUnloadは、ドキュメントの破棄タイミングで発生したと思います。 再読み込みやページ遷移、×ボタンで閉じるときにも発生するので 二重送信制御に使用するのは厳しいでしょう。
参考になるかどうかわかりませんが、 ASP.netで作成した制御の概要を紹介します。 ■1.「ドキュメントの読込み完了までボタン押下させたくない」制御 →サーバが返すHTMLでは、ボタンのDisableプロパティを常にTrueにしておき、 読み込み中はボタンを押せなくする。 →クライアント側のonLoadイベントを使って、Disableを変更する。 ■2.「送信後のレスポンス待ち時間中に、複数回ボタン連打されたくない」 制御 →onSubmitが実行されたら、送信中フラグを立てる。 送信中フラグが立っている間は、以降の送信をキャンセルする。 どこまで参考になるかわかりませんが。。 #情報が拡散してきたのでそろそろ交通整理が必要ですね〜。 #と、原因を作った張本人が言ってみる。。汗 | ||||||||||||||||||||
|
投稿日時: 2005-09-01 21:00
ASP.NETならサーバーサイドでやるのがいいでしょう。 共通のPage派生クラスで、OnPreRenderをオーバーライドする。 しかし、質問はクライアントサイドの方法でしたね。 動的に関数オブジェクトを作成するか、 http://www.tohoho-web.com/js/function.htm#newFunction 独自クラスのメソッドを渡す http://www.tohoho-web.com/js/object.htm で出来るかもしれません。 | ||||||||||||||||||||
|
投稿日時: 2005-09-01 21:25
なんにしても、クライアントだけで何とかしよう、というのには反対。 …Ajax なんか言い出したら、JavaScript は有効にしておけ!!ってことになるのか?? んで、この現象ですが、onclick イベントを上書きしているからです。サーバから送られてきた onclick イベントを、JavaScript 内で上書きしてしまうため、元々あったものが実行されません。 # ってところはいいのね。。。 現在の内容に追加するような処理が必要です。[投稿日時: 2005-09-01 17:29]分では、変更されたものを呼び出すような処理になっています。 河端さんのサイトで紹介されていたのですが、フォーラムは閉鎖している? 軽く調べてみたんですが、attachEvent で複数のイベントをアタッチできません? 河端さんのところでやっていたのは、関数のオブジェクトをとってきて、toString() で展開して、関数オブジェクトを作って…みたいな感じでした。
もちろん、現在の onclick の内容を後からにするなら、順番を入れ替えます。 _________________ | ||||||||||||||||||||
|
投稿日時: 2005-09-02 11:05
葉瀬崎浩樹さん
todoさん Jittaさん 返信ありがとうございます。 頂いた意見から実際に私の方でも検証してみました。 まずnew functionでやる方法ですが、以下のようなものを作ってみました。
そうしたら動くには動いたのですが、submittableObject_Click()の処理の無限ループ に入ってしまいました。 どうやらonclickでみている先が現在のonclickのようです。 また関数オブジェクトを作成する方法では次のようなものを作ってみました。
これはなぜか submittableObject_Click⇒go⇒submittableObject_Clickと動いていました。 よくわかりません。 またattachEventですが、以下のように作ってみました。
これも動きがなぜか submittableObject_Click⇒go⇒submittableObject_Clickと動いていました。 よくわかりません。 今回これらの関数?をはじめて使ったので調べながら作ったのですが、 作り方、または使い方はあっているのでしょうか? どこを直せば期待した動きになるのでしょうか? 宜しくお願い致します。 | ||||||||||||||||||||
|
投稿日時: 2005-09-02 11:21
動的にfunctionを作れるのですね〜。 知らなかった(ぉ
では、実際にやってみましょう。
go()→submittableObject_Click()の順に処理されました。めでたし。 でも、ボタンやリンクによってgo()の処理は違う場合は、 "go();"って、固定で書けないのですよね? go()以外の呼び出しもできるように、もっと応用の利く書き方にしないと。。 ということで、試行錯誤してみましたが。 go()にあたる関数の書き方がわからない。。 ええい、こうなったら関数オブジェクト自身を引数に渡してしまえ! と書いたのが下のコード。 #.netのdelegateをイメージに近いかな? #いや、単なるcallbackかも。。(独り言
このコードで、 1.submittableObject_ClickVer のメイン処理 2.Go()に該当する処理 の順番で実行できました。 非常に見通しが悪くなりますが。。 もっとスマートな書き方などご存知でしたら、 ご指導よろしくお願いします。 #またスレ違ってた(>_<) [ メッセージ編集済み 編集者: 葉瀬崎浩樹 編集日時 2005-09-02 11:32 ] | ||||||||||||||||||||
|
投稿日時: 2005-09-02 13:06
葉瀬崎浩樹さん
返信ありがとうございます。 葉瀬崎浩樹さんに記述していただいた方法でやりたい処理が出来ました。 ありがとうございます。 いままで助言していただいた方々どうもありがとうございました。 |