トップページのスライドショー 連打を防いでタイマー設定

こんにちは! 4連休 2日目で時間の早さに心臓がキュってなってる @dutchisover です!

GunTimer

前回の トップページのスライドショー アニメーションさせる でアニメーションのしくみを書き残しました。

しかし動かすだけならある程度すぐにできたのですが、

ボタン連打でバグる
という難関に、どうにも立ち往生してしまいました。

連打でバグるデモ

普通に使用したり、黙って一定時間ごとにスライドするのをみている分にはよいのですが、まぁ、とりあえず矢印を連打してみてください。

デモ1 (連打 未対策 + overflowなし)

hoge1
hoge2
hoge3
hoge4
hoge5
<
>

... はい。こういうことです。

ようは、スライドするアニメーションが終わり切らないうちに 次のスライドの命令が来るもんで、とりあえずスライドの命令が来たものを全部オラオラってスライドさせてしまうからスライドが間に合わずスライドにスライドが重なって...もうよく分かりません。

そこであっちこっち探しまわって助けて頂いた記事がコチラでした!

[jQuery]クリック連打予防 : クリエイター気取り

なるほど!目からうろこであります。(°̥̥̥̥̥̥̥̥Д°̥̥̥̥̥̥̥̥ )

早速、実践します!

フラグを使う!という考え方

ということです。もうちっと噛み砕くと、

とりあえずフラグを立てる

クリックする(一回目)

フラグをたたむ(受付を一切拒否させる)

アニメーションさせる

アニメーションが終わったらまたフラグを立てる(受付OKにする)

という流れを組み込んで見ました。そしてできたのがこちらです。

デモ 完成形

デモ2 (連打対策済 + overflow: hidden)

hoge1
hoge2
hoge3
hoge4
hoge5
<
>

連打してみてください!大丈夫なんです!
このフラグをON・OFFさせる手法は 他でもいろいろと応用が効きそうです。例えば、他の要素が動いているときはアニメを始めない、とか テキストの入力中は他の動作はさせないようにする、とか。

また良いことを思いついたらやってみます。以上、連打対策でした。

一定時間ごとにアニメーションさせる

これはシンプルに setInterval() を使用しました。

setInterval( アニメーションさせる関数名 , ミリ秒の時間 )

です。コードはコレ

関数名は () はいりません。 ” “ で囲まなくてもOK。
時間は 5000 なので5秒です。

変数timer へ setInterval を入れて、その変数に () を付けて呼び出します。今回は読み込みと同時にタイマーをスタートさせたいので
$(document).ready(function(){ 〜 スクリプト 〜 });
の中に入れています。

以上!スライドアニメーション完成です!

これで当ブログのトップページのアニメーションは完成です!

次は、スライドする記事の装飾を書いていこうと思います。自動でアイキャッチを取得して、それにすりガラス的なエフェクトをかけている(つもり)ので、そのやり方や、各パーツの配置を書き残していく所存です (=^・ω・^)ゞ

Sponsored