PHP / JQuery - PHP脚本每5秒运行一次,但jquery函数只运行一次

时间:2013-04-14 13:13:47

标签: php javascript jquery mysql ajax

有点混淆代码(我认为),但我希望你理解它,(是的,我知道我的Mysql API不是最好的,但是当我有时间时我会改变它(这是一个大脚本))

好吧,我有一个每5秒运行一次的PHP脚本,如果在friend_requests表中存在用户user_id的任何行,则在Jquery中发出通知,如果存在则运行jquery通知(类似于facebook)用户向他发送了朋友请求。

但问题是PHP脚本每5秒运行一次,但脚本中的Jquery函数表示打开屏幕中的通知框,只运行一次..如果我有一行用户的user_id ,如果是第一次运行php代码,只运行通知,(如果前5秒已经过去,如果该行刚刚在5秒后出现,则通知框不会出现),只要该行进入前5秒。 (但其余的PHP代码运行完美)

friend_request_notification.php

<?php include_once("includes/head.php"); ?>
<?php require_once("includes/connect/connect.php"); ?>
<?php require_once("includes/functions.php"); ?>
<?php require_once("includes/jquery.php"); ?>
<?php login_validation();

function friend_request_notification()
{
    global $db;
    global $userid;  

    $query_id_see = "SELECT user_id FROM friend_requests WHERE user_id={$userid}";
    $result_set3 = mysql_query($query_id_see, $db) or die(mysql_error());

    if ($id_requests = mysql_fetch_array($result_set3))
    {
        $select_requester_id = "SELECT user_id_requester FROM friend_requests WHERE user_id={$userid}";
        $result1=mysql_query($select_requester_id);

        $row = mysql_fetch_assoc($result1);
        $requester_id = $row['user_id_requester'];

        $select_requester_name = "SELECT * FROM members WHERE id={$requester_id}";
        $result2=mysql_query($select_requester_name);

        $row = mysql_fetch_assoc($result2);
        $requester_fname = $row['first_name'];
        $requester_lname = $row['last_name'];

        echo '
        <html>
        <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

       <link rel="stylesheet" type="text/css" href="style2.css" />
       <script src="jquery.facebookBeeper.js" type="text/javascript"></script>
       </head>
       <body>

       <div id="BeeperBox" class="UIBeeper">
         <div class="UIBeeper_Full">
            <div class="Beeps">
               <div class="UIBeep UIBeep_Top UIBeep_Bottom UIBeep_Selected" style="opacity: 1; ">
                  <a class="UIBeep_NonIntentional" href="#">
                     <div class="UIBeep_Icon">
                        <i class="beeper_icon image2"></i>
                     </div>
                     <span class="beeper_x">&nbsp;</span>
                     <div class="UIBeep_Title">
                        <span class="blueName"> ' . $requester_fname . ' ' . $requester_lname . '</span> has send you a friend request <span class="blueName">coise</span>.
                     </div>
                  </a>
               </div>
            </div>
         </div>
       </div>

       </body>
       </html>';

       $insert_table = "INSERT INTO friend_requests_notificated SELECT * FROM friend_requests WHERE user_id={$userid} ";
$delete_table = "DELETE FROM friend_requests WHERE user_id={$userid}";
$change_table1 = mysql_query($insert_table) or die(mysql_error());
$change_table2 = mysql_query($delete_table) or die(mysql_error());

    }
    else
    {

    }   
}

friend_request_notification();
?>

jquery.facebookBeeper.js

$(document).ready(function () {
// set the time for the beeper to be displayed as 5000 milli seconds (5 seconds)
var timerId, delay = 5000;
var a = $("#BeeperBox"),
    b = $("a.control");;
//function to destroy the timeout


function stopHide() {
    clearTimeout(timerId);
}
//function to display the beeper and hide it after 5 seconds


function showTip() {
    a.show();
    timerId = setTimeout(function () {
        a.hide();
    }, delay);

}
    showTip();
//function to hide the beeper after five seconds


function startHide() {
    timerId = setTimeout(function () {
        a.hide();
    }, delay);
}
//display the beeper on cliking the "show beeper" button
b.click(showTip);
//Clear timeout to hide beeper on mouseover
//start timeout to hide beeper on mouseout
a.mouseenter(stopHide).mouseleave(startHide);

$('.beeper_x').click(function () {
    //hide the beeper when the close button on the beeper is clicked
    $("#BeeperBox").hide();
});

showTip();
});

notifications.js

window.setInterval(function(){
    $('#notifications').load('friend_request_notification.php');


}, 5000);

3 个答案:

答案 0 :(得分:2)

看起来很好,但我想有一个缓存问题,比如JavaScript从缓存中获取相同的文件。添加时间戳,以便每次都请求新文件。

window.setInterval(function(){
    $('#notifications').load('friend_request_notification.php?' + (new Date()).getMilliseconds());
}, 5000);

每次发送请求时,这将强制浏览器下载新文件。

答案 1 :(得分:0)

我没有测试过这个,但我猜它只加载一次,因为它第一次加载它并缓存文件。所以,它本身并不是第二次运行。

这是有道理的,否则这个人的缓存会有一百份同一个文件没用。

当间隔运行时,它会运行javascript文件中的函数。

window.setInterval(function(){
    $('#notifications').load('friend_request_notification.php');

    showTip() 
}, 5000);

或类似的。您不应该尝试在像这样的脚本中反复加载javascript文件。 JS应该在首页。

答案 2 :(得分:0)

重要的是要意识到在您正在加载新内容的主页面中已经出现document.ready

这意味着当您加载新脚本时,它会立即触发,在这种情况下,它将在它引用的html之前触发。

friend_request_notification.php中的html之后放置脚本将确保在脚本触发之前将html加载到DOM中。

从结构上讲,您可以考虑将jquery.facebookBeeper.js中的所有代码包装到notifications.js中包含的函数中,而不是每5秒对该脚本文件发出一个新请求,在完全回调中运行您的函数load

window.setInterval(function(){
    $('#notifications').load('friend_request_notification.php',function(){
          /* new content now exists in page, run code here*/
     });

    showTip() 
}, 5000);

还应该知道,当您在页面加载时删除var a = $("#BeeperBox"),,然后用新的html替换该元素时,var a将不会引用具有相同ID的新版eleemnt。