为什么这个 Ajax 需要这么长时间才能渲染
Why is this Ajax taking so long to render?
我有一个页面,主要包含Ajax
生成的动态内容。它每 30 秒随机化一次,并显示数据库中的新内容。PHP
似乎很好,但是我的Javascript
代码似乎有问题,或者数据库存在问题导致其滞后(Ajax加载大约需要30秒!
似乎在我的 Javascript 中对 setInterval
的递归调用在执行函数之前等待分配的毫秒数,但我在我的 Javascript 中找不到任何错误.
此外,从数据库中检索到两个图像 url 字符串,当 Ajax 必须从外部来源检索信息时,它似乎可能会滞后.
或者我的使用是否有滞后的 PHP MySQL
语法ORDER BY rand()
?
这是相关的 html:
<html>
<head>
<title></title>
<script type = "text/javascript" src = "randomProducts.js" />
<script type = "text/javascript">
setIntervalOnload();
</script>
</head>
<body>
...
...
...
</body>
</html>
以下是相关的 Javascript:
// global static variables
var subCategory; // initialized from setCategoryTree
var t; // for setInterval and clearInterval
var seconds;
var millisecondsPerSecond;
var milliseconds;
function setIntervalOnload()
{
getRandomProducts();
if(typeof t != "undefined")
clearInterval(t);
seconds = 30;
millisecondsPerSecond = 1000;
milliseconds = seconds * millisecondsPerSecond;
t = setInterval(getRandomProducts, milliseconds);
}
function getRandomProducts()
{
//window.alert(subCategory);
if(typeof subCategory == "undefined")
subCategory = "all";
else
{
clearInterval(t);
t = setInterval(getRandomProducts, milliseconds);
}
var req = new XMLHttpRequest();
var products = document.getElementById("products");
req.onreadystatechange = function()
{
if( (req.readyState == 4) && (req.status == 200) )
{
var result = req.responseText;
products.innerHTML = result;
}
};
req.open("GET", "randomProducts.php?category=" + subCategory, true);
req.send(null);
}
function setCategoryTree(link)
{
var categoryTree = document.getElementById("categoryTree");
/* climbing the DOM-tree to get the category name (innerHTML of highest "a" tag) */
var category = link.parentNode.parentNode.parentNode.getElementsByTagName("a")[0].innerHTML;
subCategory = link.innerHTML;
categoryTree.innerHTML = "==> " + category + " ==> " + subCategory;
getRandomProducts();
}
。这是相关的 PHP:
<?php
// connect to MySQL
$dbName = "blah";
$db = mysql_connect("localhost", $dbName, "asdf");
if (!$db)
{
echo "<p>Error - Could not connect to MySQL</p>";
exit;
}
// select the blah database
$blah = mysql_select_db("blah");
if(!$blah)
{
echo "<p>Error - Could not select the blah database.</p>";
exit;
}
// fix html characters in $subCategory
$subCategory = $_GET["category"];
trim($subCategory);
$subCategory = stripslashes($subCategory);
$subCategoryFixed = htmlspecialchars($subCategory);
// for loop for each random product (total of 10 random products)
for($i = 0; $i < 10; $i++)
{
// query the blah database for all products
if($subCategoryFixed == "all")
{
$query = "SELECT * FROM products ORDER BY rand();";
$result = mysql_query($query);
}
else // query the blah database for products in selected subCategory
{
$query = "SELECT * FROM products WHERE cat = " . $subCategoryFixed . " ORDER BY rand();";
$result = mysql_query($query);
}
if (!$result)
{
echo "<p>Error - the query could not be executed</p><br />";
$error = mysql_error();
echo "<p>" . $error . "</p>";
exit;
}
$row = mysql_fetch_array($result);
$productValues = array_values($row);
$name = htmlspecialchars($productValues[3]);
$price = htmlspecialchars($productValues[5]);
$img = htmlspecialchars($productValues[7]);
// product info is formatted for home.html here
$str = '<div>
<a href = "' . $link . '" title = "' . $name . '">
<table id = "product-table" onmouseover = "darkenProduct(this);" onmouseout = "lightenProduct(this);">
<tr>
<td>' . $name .'</td>
</tr>
<tr>
<td><img src = "' . $img . '" /></td>
</tr>
<tr>
<td>' . $price . '</td>
</tr>
</table>
</a>
</div>';
echo $str;
} // end of products for loop
?>
您没有在 onload 方法中运行代码。AJAX 安装代码的运行速度可能快于页面的加载速度,因此var products = ...
为 null。 您需要执行以下操作:
<body onload='setIntervalOnload();'>
或
window.onload = setIntervalOnload;
setInterval
不会立即调用该函数。无论间隔有多长,函数的第一次运行都将延迟。
如果您希望函数立即运行以及在计时器上运行,则必须专门调用该函数。
相关文章:
- 为什么我的上下文选择器和.buttonset()在ie中花费了这么长时间
- 谷歌地图需要很长时间才能在ie11中渲染
- 有没有一种方法可以检查javascript以毫秒为单位执行一个函数需要多长时间
- 我一直收到的控制台警告是什么?推迟长时间运行的计时器任务以提高滚动的流畅性
- 为什么这个代码不起作用?我花了很长时间试图弄清楚这一点
- 如何在长时间执行JavaScript期间显示微调器
- 长时间轮询:每个浏览器中的通知
- 完整日历:如何支持一次点击和不长时间点击
- 如何使用 javascript 停止对 asp.net 进行正在进行的回发(长时间运行的执行)
- 为什么这个 AJAX 调用需要这么长时间
- 为什么这个正则表达式需要这么长时间才能执行
- 如何修复长时间运行的脚本
- Node.js中的垃圾收集作用域-变量将保持设置状态多长时间
- javascript秒表限制最长时间
- AJAX 可访问的长时间运行的服务任务阻止在启用 ASP.NET 兼容性/会话的环境中的后续 AJAX 服务请求
- Ajax 调用:监视它是否需要很长时间
- 为什么这个 Ajax 需要这么长时间才能渲染
- 长时间运行的AJAX请求在几分钟后重新提交
- 我的AJAX调用需要多长时间
- 用AJAX请求从客户机终止用c++编写的长时间运行的CGI脚本