jQuery下で指定要素のロード待ちの実装(pure js版に変更可能)_jquery

皆さんを誤解させないように、最初にこのメソッドの使用シナリオを述べておきます。
たとえば、ブログパークではソースコードを変更することはできません。
その場合、要素の外観を監視する方法しか見つかりません。
したがって、ソースコードを変更できない場合は、独自のプロジェクトを作成するのではなく、次の方法が使用されます。

今日ブログのスタイルをいくつか変更したとき、js を追加するのが自然だと思いました。
ページが最初にロードされたときではなく、データが ajax によってロードされるとは予想していませんでした。
たとえば、下の「コメントを送信」ボタン、右側の検索ボタンなどです。
自然に書きました

コードをコピーします コードは次のとおりです:

1 $("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //送信ボタン
2 $(".div_my_zzk").addClass("input-append"); // 検索ボックス
3 $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); // 検索ボタン

ただし、いいえ、ネットワークを調べたところ、ajax から来ていることがわかりました。
私は自分でテンプレートを作成する以外に、自分でコードを書きます。

そこで私が考えた要素の出現を待つ方法を紹介します。
これは jQuery に基づいていますが、コードは非常に簡潔であり、純粋な js バージョンに変更できます。

コードをコピー コードは次のとおりです。

jQuery.fn.wait = function (func , 回, 間隔) {
var _times = 回 || -1, //100 回
_interval = 間隔 20, // 毎回 20 ミリ秒
_self = this,
_selector = this.selector, //セレクター
_iIntervalID; //タイマー ID
if( this.length ){ //取得済みの場合は関数
func && func.call( this) ;
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //0 の場合終了
clearInterval(_iIntervalID);
}
_times < ;= _times--; // 正の数の場合 -

_self = $(_selector); //
を再度選択 if( _self.length ) { / /取得するかどうかを決定します
func && func.call(_self);
}
}, _interval);
return this; >}


使用方法はもちろん非常に簡単で、パラメータは 3 つだけです。
func はコールバック関数で、指定された要素が出現したときに実行される関数です。

回は検出回数です。デフォルトは -1 で、表示されるまで検出されます。
interval は検出間隔で、デフォルトは 20 ミリ秒です。

前のコードを変更しましょう

コードをコピーします コードは次のとおりです: $("#btn_comment_submit").wait(function() { //#btn_comment_submit 要素がロードされるのを待ちます

this.removeClass("comment_btn").addClass("btn"); //送信button

// これは $("#btn_comment_submit")
});

$("#widget_my_zzk").wait(function() { // #widget_my_zzk 要素を待機していますロードされる
$( ".div_my_zzk").addClass("input-append"); //検索ボックス
$(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn" ); //検索ボタン
});


もちろん、jQuery のチェーン構造を破壊することはできません。まだ $("#id").wait(function (){}).hide();
でも、よく考えたら要素がロードされていないのでチェーンを続ける意味がなかったのですが、忘れてください。それは変更しません、そのままにしておきます。笑 :-)

最後に、私は経験が浅いので、もしここに書かれていることが間違っていたら、アドバイスをお願いします。