1

この質問に似た他のすべての回答を見てきましたが、私のシナリオに合わせることができません。

自動更新される 15 の結果を含むサイドバーがあるページがありますが、これで問題ありません。外部ページをオーバーレイ付きの div にロードするリンクがあります。次に、結果の完全なリストを備えたこの新しいdivものも、開いている間に自動更新されます。(両方の div が不必要にバックグラウンドで自動更新されないようにします)

このfull listdiv では、各結果にjquery slideToggle()詳細情報を表示する機能があります。

私がしようとしている（そして失敗している）のは、これslideToggleが情報を表示している間、自動更新を停止させることdisplay:noneです。

これが私の最新の試みです：

html

main page has div to load into...
<div id="full_list"> loading... </div>

完全なリストを含む外部ページ

<div class="events_list">          <!--container for events -->
<ul><li>                           
<div class="full_event">           <!--each event in a list-->
#1<b> 500 m race </b>              <!--this bit always seen -->

<div class="event_slide">         <!--this div is slideToggled() -->
<b>500m race </b><br>
<div class="evntdescription"> 
run 500mrun 500mrun 500mrun 500mrun 500mrun 500m
</div>
</div>
</div>
</li></ul>
</div>

今私の試みたjavascript

var refreshData;

var infodisplay = $('.event_slide').css('display');

function autoRefresh () {

            if(infodisplay == 'none')
              {
            refreshData = setInterval(function() {          
                    $('#full_list').load('eventlist.php');
                    }, 1000);
              }     
            else
              {
            clearInterval(refreshData);
              }

};      

$("#view_events").click(function(){        //this opens up the div //
        overlay.fadeIn(1000).appendTo(document.body);
        $('#full_list').load('eventlist.php'); //loads external page//
        $('#full_list').fadeIn(800, function() {

        autoRefresh ();    //start the auto refresh/

        $("body").on("click",".full_event", function(e){ 

        $(this).children('div.event_slide').slideToggle(300, function() {

        autoRefresh ();   //thought it might work if i add the function   
                                      //here as well //

        });
        });

        });

        $("body").on("click","#close", function(e){ //closes div//
            overlay.fadeOut(300);
            $("#full_list").fadeOut(300);
            }); 

        return false;
        });

基本的に何もしません。2 番目autoRefreshの関数を削除しても機能するようになりましたが、機能が停止することはありません。更新を続けるだけで、divを閉じたときに更新を停止する方法もわかりません。さらに情報が必要な場合はお知らせください。

ありがとう！

4

2 に答える 2

0

わかりましたので、とにかくそれを理解しました。試してくれてありがとう。

ifトグルが完了した後、ステートメントを関数に入れます。

唯一の欠点は、まだ「トグル」しているのと同時にリフレッシュする場合です。トグルが完了するまで、間隔はクリアされません。それを回避する方法がわかりません。コードを次のように変更しました。

var refreshData;

function autoRefresh() {            
       refreshData = setInterval(function() {          
                $('#full_list').load('eventlist.php');
                }, 10000);
                };   

$("#view_events").click(function(){        //this opens up the div //
    overlay.fadeIn(1000).appendTo(document.body);
    $('#full_list').load('eventlist.php'); //loads external page//
    $('#full_list').fadeIn(800, function() {

    autoRefresh ();    //start the auto refresh/

    $("body").on("click",".full_event", function(e){ 

    $(this).children('div.event_slide').slideToggle(300, function() {

     if($(this).css('display') == 'none') 
        {$('#full_list').load('eventlist.php');
        autoRefresh();
        }
        else
        {
        clearInterval(refreshData);
        };

    });
    });

    });

    $("body").on("click","#close", function(e){ //closes div//
        overlay.fadeOut(300);
        $("#full_list").fadeOut(300);
        }); 

    return false;
    });
于 2013-05-04T15:09:21.663 に答える
0

非同期読み込みが完了したら、間隔をクリアしてみてください。

function autoRefresh () {
    refreshData = setInterval(function() {
    $('#full_list').load('eventlist.php', function() {
        clearInterval(refreshData);
    });
}, 1000);  };
于 2013-05-04T14:24:33.087 に答える