我遇到了一个奇怪的问题,我不知道如何拼写标题。
我想做的事:
我想跟踪一个正在运行的总数,我希望这个正在运行的总量每秒都能实时更新到我的页面上。我不想跟踪访客,它会跟踪一些奇怪的事情,比如"你身体里现在的血细胞数量!"这是一个做我想做的事情的网站,但他们在jquery中做,我试图在JS中做,以将JS文件保持在最低限度。http://www.usagain.com/(左侧)
我是如何做到的:
我有一个带有AJAX的JS文件,它链接到一个PHP文件,该PHP文件打开一个文本文件->获取一个数字->将其递增1->将所述数字发送回JS->将数字更新为HTML->,PHP更新文本文件->关闭txt文件。
我的问题:
计数器工作,它会递增,但问题是,如果我有两个浏览器在运行同一个页面,数字会递增2。如果我有3个浏览器;这个数字将增加3,依此类推。我认为这与写入文件有关,但我不确定如何修复。
我的代码
HTML/CSS/Javascript/AAJAX
<html>
<head>
<title>Counter</title>
<script language="javascript" src="../jquery1.6.js"></script>
<script type="text/javascript">
function addCommas(nStr) //http://www.mredkj.com/javascript/nfbasic.html -- Source
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /('d+)('d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
function getNum()
{
$.post('test.php', function(data){
$('#counter').html(addCommas(data));
})
}
setTimeOut(getNum, 1000);
</script>
<style type="text/css">
#counterContainer{color: #52504D;font-family:Verdana, Geneva, sans-serif;font-weight:bold;font-size:15px;position:relative;top:22px;}
#counter{color: #1E7EC8; font-size: 25px;letter-spacing:1px;}
</style>
</head>
<body onload="getNum()">
<div id="counterContainer">
<div id="counter"><!--Counter Goes Here, Do Not Disturb--></div>
</div>
</body>
</html>
PHP文件
<?php
$fp = fopen("staticNum.txt", "r+");
flock($fp, LOCK_EX);
$num = fgets($fp, 11);
$num = intval($num)+1;
echo $num;
fseek($fp, 0, SEEK_SET);
fputs($fp, "$num");
flock($fp, LOCK_UN);
fclose($fp);
?>
我的文本文件中只有这个数字:
10000100260
任何建议都很好。我最初的想法是建立一个数据库,但后来我想我也会遇到同样的问题。我确实想远离会话变量和Cookie,当然,因为我认为它们没有必要。不过我可能错了。
如果你能在没有数据库的情况下找到解决我问题的方法,就可以获得加分!(虽然我不是管理员,但不是真的:(
不要计数,而是尝试使用时间戳:
value = ( timestamp % ((max_limit - min_limit) / 1.5 ) ) * 1.5 + min_limit
我不完全确定你的计数器将如何工作——它从哪里开始计数等等,但我认为这应该会对你有所帮助:
var init_count = 10000100260; //starting heartbeats
var count_start = 1325803921; //timestamp of when initial count was taken
function update_count()
{
var utstamp = new Date();
utstamp = Math.round(utstamp.getTime()/1000); //get current unix timestamp
var newcount = (utstamp - count_start) + init_count; //add seconds passed since initial count, to the initial count
$("#beat_count").html(newcount); //set the contents of your element to the new number
}
var ticker = setInterval(update_count,1000); //call the above function every 1000 milliseconds (1 second)
您可以使用以下表格获取初始时间戳:http://www.functions-online.com/mktime.html
这可能会提出比答案更多的问题,但无论如何都要让我知道!
计数器工作,它会递增,但问题是,如果我有两个浏览器在运行同一个页面,数字会递增2。如果我有3个浏览器;这个数字将增加3,依此类推。我认为这与写入文件有关,但我不确定如何修复。
我假设每个用户运行多个浏览器。计数器有效,但你认为用户实际上是浏览器。由于每个浏览器都会触发计数的增加,您所描述的不是问题,而是脚本的工作原理。