jQuery-实时PHP重新加载
[英]JQuery - Live PHP reload
问题描述
我最近在使用JQuery和PHP时遇到了一些问题。 我一直在创建一个带有按钮的网页，并且该按钮曾经被任何人按下过多次。 目前，我正在使用JQuery和PHP来使按钮按下计数每秒更新4次。
看一下代码：
index.php：
<!DOCTYPE html>
<html>
<head>
<title>The Button</title>
<audio id="click">
/* Big thanks to freesound.org and user "brnck" for the button click sound!
You can download the sound at: http://freesound.org/people/brnck/sounds/257357/ */
<source src="button-click.wav">
</audio>
</head>
<style>
#background1 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: -1;
}
#button {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 0;
}
/* This CSS class of #button is for the button press animation */
#button.press {
-webkit-animation-name: pressAnim; /* Webkit Syntax */
-webkit-animation-duration: 1s;
animation-name: pressAnim; /* Standard Syntax */
animation-duration: .75s;
}
#background2 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 1;
}
#number {
text-align: center;
font-style: "Arial Black";
font-size: 100px;
}
/* Webkit Animation */
@-webkit-keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
/* Standard Animation */
@keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
</style>
<body>
<div id="background1">
<img src="ButtonTop.png" width="290" height="372">
</div>
<div id="button">
<img src="Button.png" width="290" height="372">
</div>
<div id="background2">
<img src="ButtonBottom.png" onMouseDown="press()" width="290" height="372">
</div>
<div id="number">
<?php
include('reload.php');
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(document).ready(function(){
/* This function is for refreshing the total clicks number to make it live */
setInterval(function reload() {
console.log('Reloaded Clicks')
$('#number').load('reload.php');
}, 250);
});
</script>
<script>
/* This function is for the button animation, button sound, & button press delay */
var button = document.getElementById('button');
function press() {
if(button.className == "") {
button.className = "press";
document.getElementById('click').play();
/* send click event to server */
button.addEventListener("webkitAnimationEnd", removeListener);
}
};
function removeListener(event) {
button.removeEventListener("webkitAnimationEnd", removeListener);
button.className = "";
}
</script>
</body>
reload.php：
<?php
$my_file = 'clicks.txt';
$handle = fopen($my_file, 'r');
$value = fread($handle,filesize($my_file));
echo $value;
?>
在“ JQuery”部分中，有一个到控制台的日志，但是当我访问网站时，日志中什么都没有显示，因此我认为由于某种原因JQuery部分被完全跳过了。 虽然，控制台中没有错误，但是这使问题更难识别...
如果您想浏览该网站，这里是地址 ，但是正常运行时间并不很出色，因此如果您无法访问该网站，请不要感到惊慌。
2 个解决方案
解决方案1
0 已采纳 2015-09-28 04:53:12
您的代码无法正常工作，因为您在加载jQuery库的脚本中定义了逻辑的某些部分。 script标记的内容将被丢弃，并由列为src属性的URL的内容替换。
因此，您需要将$(document).ready()移至第二个块。 在使用时，为了安全起见，所有代码均应在ready块中定义，因为否则您将无法真正精确地控制何时执行。
最后，正如Ken Franqueiro和Kaleb Klein指出的那样，每250毫秒刷新一次数据将杀死服务器。
解决方案2
0 2015-09-28 22:53:39
对于任何有相同问题的人，感谢Guillaume Bodi，Ken Franqueiro和Kaleb Klein，这是我想出的解决方案：
<!DOCTYPE html>
<html>
<head>
<title>The Button</title>
<audio id="click">
/* Big thanks to freesound.org and user "brnck" for the button click sound!
You can download the sound at: http://freesound.org/people/brnck/sounds/257357/ */
<source src="button-click.wav">
</audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<style>
#background1 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: -1;
}
#button {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 0;
}
/* This CSS class of #button is for the button press animation */
#button.press {
-webkit-animation-name: pressAnim; /* Webkit Syntax */
-webkit-animation-duration: 1s;
animation-name: pressAnim; /* Standard Syntax */
animation-duration: .75s;
}
#background2 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 1;
}
#number {
text-align: center;
font-style: "Arial Black";
font-size: 100px;
}
/* Webkit Animation */
@-webkit-keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
/* Standard Animation */
@keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
</style>
<body>
<div id="background1">
<img src="ButtonTop.png" width="290" height="372">
</div>
<div id="button">
<img src="Button.png" width="290" height="372">
</div>
<div id="background2">
<img src="ButtonBottom.png" onMouseDown="press()" width="290" height="372">
</div>
<div id="number">
<?php
include('reload.php');
?>
</div>
<script>
$(document).ready(setInterval(function(){
console.log('Reloaded Clicks')
$('#number').load('reload.php');
}, 2000));
/* This function is for the button animation, button sound, & button press delay */
var button = document.getElementById('button');
function press() {
if(button.className == "") {
button.className = "press";
document.getElementById('click').play();
/* send click event to server */
button.addEventListener("webkitAnimationEnd", removeListener);
}
};
function removeListener(event) {
button.removeEventListener("webkitAnimationEnd", removeListener);
button.className = "";
}
</script>
</body>
总结一下，我摆脱了不必要的额外功能，并将脚本源放在了首位。 另外，我将重新加载的速度减慢到每两秒钟一次。
以下是一些计划和其他不重要的内容。
如果需要，我会进一步放慢速度，但这会带来问题。 如果我有一个客户，请单击该按钮，并且计数在几秒钟内没有变化，我们得到的是所谓的延迟。 我计划通过客户方面的假设来解决此问题。
所谓“假设”，是指我要让客户端通知服务器他们单击了按钮，然后让客户端将计数加一。 然后，几秒钟后，服务器将以新的总点击数进行响应，其中包括来自其他客户端的点击数。 新的号码将在客户端上更新，一切都会很好。
希望这一切都是有道理的，但实际上并不需要。 这不是很重要，只是我自己的一些计划和理论。
重新加载？ jQuery .live / .load之后的Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.