Question

我试图通过setInterval创建像Facebook这样的通知。通知工作正常，但问题是包含通知的div每6秒关闭一次，我认为原因是setInterval。有没有办法阻止div关闭？关于结束的意思是，例如我点击通知div将弹出，然后6秒后div消失，就像刷新页面一样。

这是我的通知脚本代码，

   $(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);
}

通过setInterval

1 个答案: