スライドショー再開ボタンの連打で動作がおかしくなる問題

このQ&Aのポイント
  • スライドショー再開ボタンを連打すると、スライドショーが超高速で動き続けてしまう問題が発生しています。
  • 実務ではこの問題に対処する必要はありません。
  • 連打をしても問題が発生しないようにする方法はありません。
回答を見る
  • ベストアンサー

再開ボタンを連打するとずっとスライドショーが変

http://okwave.jp/qa/q9260560.html のつづき //停止した場合の再開ボタンのJS $('#js-play-btn').click(function() { startTimer(); }); 上記でスライドショーを再開することには成功したのですが 再開ボタンを連打するとずっとスライドショーが超高速で動き続けるという、BAGU?が起きます。 実務ではそこまで対処する必要はありますか? そこまでする人はふつういないので、このような場合は製作者側の問題でないといってもよいのでしょうか? もし連打をしてもおかしくならないような方法があれば教えてください。

noname#226032
noname#226032

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

再開ボタンをクリックする度にsetIntervalによるタイマーが生成されるため、 複数のタイマーがそれぞれ稼動している状態になります。 そのため、各タイマーがそれぞれのタイミングでchangePage()を呼び出すため、 スライドが高速で動いているものと思われます。 連打をしても動かないようにする方法は、 タイマーを起動の状態を変数で管理するのがよいかと思います。 例: var isStart = false; $('#js-play-btn').click(function() { if (isStart == false) { startTimer(); isStart = true; } }); > 実務ではそこまで対処する必要はありますか? > そこまでする人はふつういないので、このような場合は製作者側の問題でないといってもよいのでしょうか? あたなの会社の方針次第です。 私なら開発者として恥ずかしいので修正します。

noname#226032
質問者

お礼

ありがたいです。 //停止した場合の再開ボタンのJS $('#js-play-btn').click(function() { startTimer(); }); /* /オプションを足す場合はここへ記載 */ var isStart = false; $('#js-play-btn').click(function() { if (isStart == false) { startTimer(); isStart = true; } }); としましたがやはり連打するととてつもないスピードで変更するようになります。 こちらは'#js-play-btnをクリックしたときにisStart がfalseだったらタイマーを再開して、turueにfalseを変更するということをやっているのでしょうか? ただisStartという変数や内容はここで定義するまえには存在しないものですよね。 この中身がtrueかfalseかはどこで決まっているのでしょうか? またfalseが停止中の時で、trueが再生中を示しているのでしょうか? これは仕様で決まっているのですか?

その他の回答 (1)

回答No.2

isStartはご自身で適切な場所に配置してください。 タイマーを稼動する際に呼び出す関数のなかでtrueを、 タイマーを停止する際に呼び出す関数のなかでfalseを設定されれば良いかと思います。 「連打するととてつもないスピードで変更する」 こちらの原因については理解、および確認をされたのでしょうか? 原因を理解されていないと、修正内容についても理解できないのではないでしょうか? ChromeのDeveloper Tools(F12キーで表示)等を使って、 実際にどのような動きをしているのか、確認された方が良いかと思います。 JavascriptのChromeでのデバッグ方法 http://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

参考URL:
http://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

関連するQ&A

  • スライドショーの再生ボタンがうまくいきません

    https://okwave.jp/qa/q9320398.html の続き スライドショーの再生ボタンがうまくいきません 一度止めてから再度再生を押しても再生が再開されません。 何度も恐縮ですが理由がわかりますか? var it; let iterative = ()=> { it = setTimeout(myChange , 5000); } iterative(); let stoppingNow; const pauseBtn = document.getElementById('js-pause-btn'); pauseBtn.addEventListener('click', ()=> { clearTimeout(it); let stoppingNow = true; }); const playBtn = document.getElementById('js-play-btn'); if(stoppingNow === true) { playBtn.addEventListener('click', ()=> { iterative(); stoppingNow = false; });

  • clearIntervalで止めたものを再開

    下記のようにスライドショーの停止ボタンを作ったのですがその後の再開ができません。 $('#pause-btn').click(function() { clearInterval(Timer); } ) ただその後再開のボタンをどうするか今考えています。 http://phpjavascriptroom.com/?t=js&p=timer ここを見ても難しいです。 アドバイスいただけませんでしょうか? clearIntervalで止めたものを再開する方法はありますか? ソース /スライドショー $(function(){ //(1)ページの概念・初期ページを設定 var page=0; //(2)イメージの数を最後のページ数として変数化 var lastPage =parseInt($("#slide img").length-1); //(3)最初に全部のイメージを一旦非表示にします $("#slide img").css("display","none"); //(4)初期ページを表示 $("#slide img").eq(page).css("display","block"); //(5)ページ切換用、自作関数作成。changePageを定義 function changePage(){ $("#slide img").fadeOut(1000); $("#slide img").eq(page).fadeIn(1000); }; //(6)~秒間隔でイメージ切換の発火設定 //※(5)でchangePageを定義している //TimerというタイマーIDを作成した。 var Timer; function startTimer(){ Timer =setInterval(function(){ if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; },5000); } //(7)~秒間隔でイメージ切換の停止設定 //clearIntervalとは、「setInterval」メソッドの繰り返し処理を停止するメソッド function stopTimer(){ clearInterval(Timer); } //(8)タイマースタート startTimer(); //(9)「次へ」、左に画像を動かすをクリックボタン用のjs //※(5)でchangePageを定義している $("#next-left-btn").click(function() { //タイマー停止&スタート(クリックした時点から~秒とする為) stopTimer(); startTimer(); if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; }); //「戻る」、右に画像を動かすをクリックボタン用のjs $("#next-right-btn").click(function() { //タイマー停止&スタート(クリックした時点から~秒とする為) stopTimer(); startTimer(); if(page === 0){ page = lastPage; changePage(); }else{ page --; changePage(); }; }); //TimerというタイマーIDを作成した。下記の部分でしていている。 //Timer =setInterval(function(){ $('#pause-btn').click(function() { clearTimeout(Timer); } )

  • jsのスライドショーのボタンの時間制御について

    jsのスライドショーについて質問です。 メイン画像とサムネール画像が連動していて、5秒間で次の画像及びサムネールに自動的にスライドするというものを作りました。そして、Prevボタンやnextボタンをつけ、クリックと、手動で次のスライドに移るようにしました。 これに、切り替わったスライドから5秒間止まり次の画像に切り替わるという設定を加えたいのですが、うまくいきません。自動再生中の4秒後にボタンをクリックすると、次のスライドが1秒で、また次のスライドに切り替わってしまうのです。 どうか方法を教えてください。 <スクリプト> //自動再生 var timerID = setInterval(function(){ $('#thumbsNext').click(); },5000); $('#gallery ul').hover(function(){ clearInterval(timerID); }, function(){ timerID = setInterval(show, 5000); // マウスアウト時にスライドショーを再開 }); function show(){ $('#thumbsInner').animate({ marginLeft:parseInt($('#thumbsInner').css('margin-left'))-248+'px' },'slow','swing', function(){ $('#thumbsInner').css('margin-left','-248px'); $('#thumbsInner ul li:first').appendTo('#thumbsInner ul'); $('#thumbsList .active').next().click(); }); }

  • jQueryでスライドショーを作っているのですが

    jQueryを使用し、下記URLの様な画像がスライドショーになるサイトを製作しているのですが、 (http://maxb.net/scripts/jbgallery-2.0/docs/nomenu.html) JavaScrip初心者の為、スライドショーを最後の画像でストップするやり方が分からず 困っております。 スライドショーにはjbgallery-2.0.jsといファイルを使用しております。 (ファイルを製作された方のサイトはこちら:http://maxb.net/scripts/jbgallery-2.0/) スライドショーが最後の一枚でストップする方法をおわかりの方がいらっしゃいましたら、 ぜひ教えていただきたいと思っております。 ご教授のほど、何卒よろしくお願いいたします。

  • jQuery GalleryViewスライドショー

    http://spaceforaname.com/gallery-customized.html このスライドショーを使いたくて色々と試していますが(ローカル環境・IE8) 1) オーバーレイ部分に表示されるテキストの位置、大きさの設定方法が分かりません。 2) カーソルを画像に持っていった時にスライドショーがストップするハズなのですが止まりません。 3) 画面上部の矢印ボタン(←・→・↓)が表示されません。 4) JSに色々なバージョンがあり、どの組み合わせが最適なのか分かりません。 XP-Pro SP3,Dreamweaver8で製作しております。 どなたかお助けください。

  • 複数の自動スライドショー(jQuery)の設置方法

    前回の質問の http://okwave.jp/qa/q6602248.html の続きです。 今1つだけ設置している自動スライドショーを、 2つ、3つと同HTML内に増やしていきたいのですが、参考にした http://spaceforaname.com/filmstrip.html こちらのサイトをみて $('#photos').galleryView({ の部分や他にも共通するjs内の部分の名前を $('#photos').galleryView2({ などに変更してみたのですが、いっこうに動いてくれません。 どのようにしたらこの自動スライドショーを複数設置することができるのでしょうか? この自動スライドショー以外に似たようなものを探しましたが、 リンクができ、尚かつ各々の写真の下に文章を入れることができるという形の物が見つからず・・・。 非常に困っております。 どうかご回答お願い致します。

  • スクロールスライドショー

    https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js を使って モニター横100%で画像のスライドショーを作りたいのですが、 高さは300pxくらいで、3枚表示され、マウス操作かボタンクリックで右や左の画像に代わっていく ご指導お願いいたします。

  • パワーポイント2003の目的別スライドショーを含むスライドショーについて

    パワーポイント2003(WinXP)のスライドショーについてお伺いしたく、質問いたします。 1→2→3・・・・・18→19→20→A というスライドショーを作成しました。 1~20までのスライドはそれぞれが クリックごとに文章やオブジェクトがでるようなアニメーションになっています。 各スライドの切り替えもクリックのタイミングで行います。 Aは1~20までを進めていく上で かなり頻繁に使用する図なので Aを目的別スライドショー設定し、 1~20までのスライドにAをリンク先にした動作設定ボタンを設置、 Aには「直前に表示したスライド」へ戻る動作設定ボタンを設置しました。 その結果 1のスライドのアニメーションの途中でAにとんで戻ってくると 1のアニメーションが終了→(ボタンではないところを)クリック→2のスライド と進みたいのに 1のアニメーションが終了→クリック→A と進んでしまいます。 Aの動作設定ボタンをクリックすると 1には戻らず、スライドショーが終了してしまいます。 マスタ上で動作設定ボタンを設置するからいけないのかと思い、 (Aはマスタ上のボタンの上に戻るボタンを乗せました) 各スライドごとに設置してみましたが同じでした。 この場合、対応策はありますか? どうぞよろしくお願いいたします。

  • PowerPointスライドショーのショートカット

    MSのPowerPoint2002を使用しています。 「現在のスライドからスライドショーをはじめる」ボタンが右下に小さくありますが、 それをショートカット(例えばctrl+○)などではじめることはできないでしょうか? 最初のスライドからスライドショーを始めるにはショートカットがあると思うのですが、現在のスライドからはじめる場合のショートカットが欲しいので宜しくお願いします。

  • スライドショーなどずっと繰り返す処理

    https://okwave.jp/qa/q9339175.html の続き スライドショーなどずっと繰り返す処理ってよくありますよね。 その様な場合配列のインデクス番号を初期化してやらないと、一度画像を回って最後のがぞうで止まってしまうと思うのですが、 また繰り返すためにはどうすればいいのでしょうか? 初期化すると必然的に無限ループになりませんか? 教えていただけませんでしょうか?