2016-06-25 7 views
0

シナリオ: 私は左側のセクション連絡先とグループを含むメッセージを送信すると、右の1は、会話の流れを持っているために、コンテナが含まれているメッセージのページを持っています。会話の流れは、ajax経由で読み込まれ、一方、他の人は連絡先やグループをクリックします。 this is what it looks likeは、5秒ごとに実行されるsetinterval関数を含むjavascriptファイルを使用して右側の内容を読み込み、新しいメッセージのデータベースをチェックし、会話divに表示するためのメッセージを取得します。jqueryのAJAX削除前の要求

問題: ページの最初の読み込み時に、連絡先またはグループをクリックすると、内容が読み込まれ、すぐにsetinterval機能が実行されることは明らかです。別の連絡先やグループをクリックしてコンテンツを再度読み込んでsetinterval関数をもう一度実行すると、chrome開発者ツールを見るときに2つのsetinterval関数が実行されるという問題があります。 As you can see in this image, there are two requests now, 1 for contact and 1 for group since i clicked a contact and a group。また、連絡先やグループをさらにクリックすると、リクエストは続けられます。

連絡先またはグループをクリックしたときにこれは、AJAXを介してローディングコンテンツのコードである:

$('.my_contacts a.list-group-item,.my_groups a.list-group-item,.new_message .list-group-item a').click(function(){ 
     var href=$(this).attr('href'); 
     $('.list-group-item').removeClass('active'); 
     $(this).addClass('active'); 
     $.ajax({ 
      url:href,type:'post' 
     }).done(function(d){ 
      $('#center-wing').html(d); 
     }); 
     return false; 
    }); 

、これがロードされたAJAXデータ内のコンテンツである:

...more html content here 
<script> 
$(function(){ 
    $.getScript("res/js/custom/in-page/message.js"); 
}); 
</script> 

そしてこれはmessage.jsで5秒ごとにコードを実行してください:

if(notification == true){ 
     checkNewMsgId=setInterval(function(){ 
      $.ajax({ 
       url:'message/check_new_message/' + recipient + '/' + type, 
       type:'post' 
      }).done(function(d){ 
       if(d.length > 0){ 
        var obj={}; 
        lastmsg.addClass('hide'); 
        reset_inactivity(); 
        for(var o in d){ 
         var date=new Date(d[o].SentDate),time=format_time(date); 

         bubble_tpl_left.find('.bubble').attr('data-pk',d[o].Remarks); 

         if(d[o].SenderId == recipient){ 
          lastmessagedate=format_date(date); 
          lastmessagetime=time; 
         } 

         if(type == 'CustomGroup') bubble_tpl_left.find('.msg_sender').removeClass('hide').html(d[o].FirstName + " " + d[o].LastName); 

         send(d[o].Reply,time,bubble_tpl_left); 

         obj.title=name; 
         obj.body=d[o].Reply; 
        } 
        if(pagehidden == true){ 
         ding.play();push_notify(obj); 
        }else blop.play(); 
       } 
      }); 
     },5000); 
    } 

...長いポストみんなのために申し訳ありません。 Imは本当にこれに固執し、setintervalを実行する前に間隔をクリアしようとしました。

助けていただければ幸いです。

+0

使用のsetTimeout()あなたはこの一度だけ – fahadash

答えて

1

(1)2つの機能があります。グループ(loadConversion())の会話を読み込むスレッドと、会話のメッセージを更新するスレッド(updateMessages())。ユーザがグループをクリックしたとき

(2)loadConversion()を呼び出します。そのajax呼び出しが返ってくると、(setInterval()ではなく)を呼び出して、updateMessages()を5秒待ってから実行する必要があります。 updateMessages()のajaxコールが返ってくると、setTimeout()に再度呼び出して、updateMessages()を呼び出します(5秒待ってから)。これにより、継続的な更新が設定されます。

(3)しかし、ユーザーがグループをクリックしたとき、あなたはどんな既存のタイマーをキャンセルしloadConversion()を呼び出す前に、未処理のAJAX呼び出しを中止する必要があります。 (または、次のAJAX呼び出しを行う前loadConversion()の内側にこれを行うことができます。)


setTimeout()機能がtimerIdが返されます。その変数を変数に格納します。タイマーをキャンセルするには、clearTimout()に渡すことができます。

同様に、$.ajax()関数は、AJAX呼び出しを中止するために使用することができるjqXHRオブジェクトを返します。

0

は1ページとしてページ全体を考えると、ページのセクションだけのように各別の領域 - ない新しい文書として。

右側のセクションにロードしているページでJavaScriptを読み込まないでください。 javascriptは、そのセクションの一部ではなく、メイン文書の一部でなければなりません。ページの一部をリロードするたびに、そのjsを実行し、新しいsetIntervalを開始するため、複数の間隔が得られます。これは実行を継続します。

現在選択されている連絡先のhrefを保存する隠し入力フィールドを使用し、繰り返しAJAXコードブロックがそのhrefをPHPファイルに送信して、DBから新しいメッセージを要求/返すようにします。

var href = $('#curr_href').val(); 
 
$.ajax({ 
 
    type:'post', 
 
    url: href 
 
}).done(function(d){ 
 
    //etc etc etc
: - チャット履歴をロードしていない、メイン文書の一部である必要があります - このような何かを行うことができますあなたの繰り返しAJAXは

/* javascript/jQuery: */ 
 

 
$('.my_contacts a.list-group-item,.my_groups a.list-group-item,.new_message .list-group-item a').click(function(){ 
 
    var href=$(this).attr('href'); 
 
    $('#curr_href').val(href); //store current href 
 
    $('.list-group-item').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $.ajax({ 
 
     type: 'post', 
 
     url: href 
 
    }).done(function(d){ 
 
     $('#center-wing').html(d); 
 
    }); 
 
    return false; 
 
});
<!-- HTML: --> 
 

 
    <!-- stick it down at bottom of body, like so --> 
 
    <input type="hidden" id="curr_href" /> 
 
    </body> 
 
</html>

この使用例では、再帰的setIntervalとは対照的に、setTimeoutを:

​​

setTimeout or setInterval?

+0

を実行したい場合、私はまだあなたのソリューションを適用するが、私はにロードされたセクションからのスクリプトタグを転送haventは主な文書 '$アヤックス({ \t \t \t URL:HREF、種類: 'ポスト' \t \t})ので、コード内でこの今のように好きです。(関数(D){ \t \t \t $( '#行われ中央翼 ')HTML(D);。 \t \t \t $ .getScript( "RESの/のJS /カスタム/中-ページ/ message.js"); \t \t}); false false; ' –

+0

はまだ動作していません。複数のリクエストがバックグラウンドで実行されています。それはajaxコールバックの読み込まれたスクリプトが保持されているようです。何とかバックグラウンドで実行されているスクリプトを削除する方法はありますか? –

関連する問題