setIntervalによる通知の処理

Question

setInterval経由でFacebookのような通知を作成しようとしています。通知は正常に機能していますが、問題は、通知が含まれているdivが6秒ごとに終了し、原因がsetIntervalだと思います。 divが閉じないようにする方法はありますか？私が閉じていることを意味するものは、divがポップアウトする通知をクリックすると、divが消えて6秒後にページをリフレッシュするようなものです。

はここ

$(document).ready(function() { 
    loadnotif(); 
    setInterval(loadnotif, 6000); 

    $("#notificationsss").on("click", $("#notificationLink"), function() { 
     $("#notificationContainer").fadeToggle(300); 
     $("#notification_count").fadeOut("slow"); 

    }); 
    }); 

    function loadnotif() { 
    var stud = $("#stud").val(); 
    var ref = $("#ref").val(); 
    $.ajax({ 
     url: 'getrecords.php', 
     method: 'POST', 
     data: { 
     "loadnotif": 1, 
     "studno": stud, 
     "ref": ref 
     }, 
     success: function(data) { 
     $('#notificationsss').html(data); 
     } 
    }); 
    } 

は、ここではPHPのコードだと、通知のための私のスクリプトコードです。

if(isset($_POST['loadnotif'])){ 
    $ref = $_POST['ref']; 
     $stud = $_POST['studno']; 

      $sql3 ="SELECT DISTINCT subj_descr FROM subj_enrolled WHERE enroll_ref = '$ref'"; 
       $results = mysqli_query($con, $sql3); 

       $data = array(); 
       while($row = mysqli_fetch_array($results)){ 
         $data[] = $row['subj_descr']; 

       } 
      $in_str = "'".implode("', '", $data)."'"; 

       $sql ="SELECT * FROM notification WHERE subj_descr IN ($in_str) AND status ='unread' OR stud_no='$stud' AND status ='unread'"; 
       $result = mysqli_query($con, $sql); 

       $count = mysqli_num_rows($result); 

      $output = '  <ul id="main-menu" class="nav navbar-nav navbar-right"> 
        <li class="dropdown hidden-xs"> 
        <li id="notification_li"> 
        <a href="#" id="notificationLink"><i class="fa fa-globe"></i>  
         <span class="notification-counter" style="background-color:red;border-radius:3px;padding: 1px 3px;position:relative;top:-9px;right:9px;font: 8px Verdana;;">'.$count.'</span></a> 

        <div id="notificationContainer"> 
        <div id="notificationTitle" style="text-align:center;background-color:#ba4f46;color:#fff;">Notifications</div> 
        <div id="notificationsBody" class="notifications">'; 


       $sql1 ="SELECT * FROM notification WHERE subj_descr IN ($in_str) OR stud_no='$stud'"; 
       $results = mysqli_query($con, $sql1); 
         while($row = mysqli_fetch_array($results)){ 
          $subj = $row['subj_descr']; 
          $des = $row['notif_description']; 
          $date = $row['date']; 
          $no = $row['stud_no']; 

          if($no == 0) 
          { 
           $fac = $row['fac_code']; 
           $sql2 ="SELECT * FROM faculty WHERE fac_code ='$fac'"; 
           $resultss = mysqli_query($con, $sql2); 
           while($row = mysqli_fetch_array($resultss)){ 

      $output .='  <a href="viewlecture.php?subjdescr='.$subj.'" style="display:block;color:black;background-color:#f6e9e8;" id="notifa"> 
          <div> 
          <img src="img/izuku.jpg" style="max-width:50px;max-height:70px;float:left;margin:0px 10px;"> 
          <p style="display:inline;"><strong>'.ucwords(strtolower($row['fac_fname'])).' '.ucwords(strtolower($row['fac_lname'])).'</strong> '.$des.'<strong><br> '.ucwords(strtolower($subj)).'</strong></p> 
          <p style="font-size:12px;">'.$date.'</p> 

          </div> 

         </a>'; 
         } 
        } 
        else{ 
           $fac = $row['fac_code']; 
           $sql2 ="SELECT * FROM faculty WHERE fac_code ='$fac'"; 
           $resultss = mysqli_query($con, $sql2); 
           while($row = mysqli_fetch_array($resultss)){ 

      $output .='  <a href="grades.php" style="display:block;color:black;background-color:#f6e9e8;" id="notifa"> 
          <div> 
          <img src="img/izuku.jpg" style="max-width:50px;max-height:70px;float:left;margin:0px 10px;"> 
          <p style="display:inline;"><strong>'.ucwords(strtolower($row['fac_fname'])).' '.ucwords(strtolower($row['fac_lname'])).'</strong> '.$des.'<strong><br> '.ucwords(strtolower($subj)).'</strong></p> 
          <p style="font-size:12px;">'.$date.'</p> 

          </div> 

         </a>'; 
         } 
        } 


        } 




     $output .='   </div> 
        <div id="notificationFooter" style="background-color:#ba4f46;"><a href="#" style="color:#fff;">See All</a></div> 
        </div> 
        </li> 
      </li> 


      </ul>'; 

      echo $output; 

    } 

Answer 1

常にsetTimeoutを使用すると、setIntervalは奇妙なバグを作成します。 完全コールバックに次のsetTimeoutを入れてください

... 
success: function(data) { 
    $('#notificationsss').html(data); 
}, 
complete: function() { 
    setTimeout(loadnotif, 6000); 
}