jQuery API の jQuery . holdReady( hold ) は、jQueryのreadyイベントの実行を保留または保留解除するメソッド。jQuery( callback )の実行を、保留及び保留解除できるわけだ。
引数
- hold
「true」を指定すると、jQueryのreadyイベントの実行を保留。
「false」を指定すると、jQueryのreadyイベントの実行の保留を解除。
戻り値
- undefined
未定義。
記述方法
jQuery . holdReady( true );
jQueryのreadyイベントの実行を保留。
jQuery . holdReady( false );
jQueryのreadyイベントの実行の保留を解除。
記述例
jQuery . holdReady( true );
jQuery . getScript( 'sample.js', function() {
jQuery . holdReady( false );
} );
jQuery . getScript( 'sample.js', function() {
jQuery . holdReady( false );
} );
「sample.js」を読み込むまで、jQueryのreadyイベントの実行を保留。
実装例（サンプル）
実装例（サンプル）の動作について
「解除」ボタンをクリックする前に、「点滅」ボタンをクリックしても何も起こらない。。
「解除」ボタンをクリック後に、「点滅」ボタンをクリックすると、オレンジ色のボックス要素を、5回点滅させる。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery . holdReady( true );
window . onload = function() {
document . getElementById( 'jquery-sample-holdReady-false' ) . onclick = function() {
jQuery . holdReady( false );
}
}
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click(
function() {
jQuery( this ) . prop( 'disabled', true );
jQuery( '#jquery-sample-animation' )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 );
setTimeout( function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
}, 5000 );
}
);
} );
// -->
</script>
<!--
jQuery . holdReady( true );
window . onload = function() {
document . getElementById( 'jquery-sample-holdReady-false' ) . onclick = function() {
jQuery . holdReady( false );
}
}
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click(
function() {
jQuery( this ) . prop( 'disabled', true );
jQuery( '#jquery-sample-animation' )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 )
. fadeTo( 500, 0.25 )
. fadeTo( 500, 1 );
setTimeout( function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
}, 5000 );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample-animation {
margin: 10px;
padding: 10px;
height: 100px;
background-color: orange;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample-animation {
margin: 10px;
padding: 10px;
height: 100px;
background-color: orange;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
<button id="jquery-sample-holdReady-false">解除</button>
</p>
<p>
<button id="jquery-sample-button">点滅</button>
</p>
<div id="jquery-sample-animation"></div>
</div>
<p>
<button id="jquery-sample-holdReady-false">解除</button>
</p>
<p>
<button id="jquery-sample-button">点滅</button>
</p>
<div id="jquery-sample-animation"></div>
</div>