[原创]警惕：javascript的异步调用

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/clhed/articles/1192442.html

文章标签：

#javascript #xhtml #c# #ViewUI

本文探讨了在网页开发中，由于浏览器异步加载导致JavaScript变量未定义的问题，并提出了通过同步调用和提供数据接口的方法来解决该问题。

开发网页的时候有时候会遇到类似问题看自己的js写的明明没有问题
但是事实上却报错
通过showCount.htm显示从getCount.aspx页面传过来的数据

数据页

getCount.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="getCount.aspx.cs" Inherits="getCount" %>

var messageCount; //文章数量
function getCount(paramCount)
{
messageCount =paramCount;
}
getCount(<%= messageCount %>)

getCount.aspx<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>显示数据</title>
</head>
<body>
    <input id="Text1" type="text" />
    <input id="Text2" type="text" />
<script language="javascript" src ="getCount.aspx" ></script>
    <script   language="javascript" type="text/javascript">
    function putCount()
    {
    document.getElementById("Text1").value = 1;                                    // 将1赋给Text1
    document.getElementById("Text2").value = messageCount;                 // 将messageCount赋给Text2
    }
putCount();
</script>
</body>
</html>

数据显示页运行后
显示为：

并且提示错误错误：
messageCount is not defined
messageCount没有定义
但是事实上这个变量messageCount 在head里面已经定义过了的
只不过现在取不到而已
为什么会发生这种情况呢
因为浏览器是异步调用文件的
因为浏览器一般是先按顺序读取文件
在执行getCount.aspx的同时继续向下读取文件
这2者是异步进行的
当执行到下面这步时
document.getElementById("Text2").value = messageCount;                 // 将messageCount赋给Text2
有可能getCount.aspx里的messageCount可能还没有被执行
所以就会出这种问题
那么该如何从其他页面取数据呢？
最好的解决办法就是在提供数据的页面提供调用数据的接口
在原有的数据页面里加上一下这段
getCount.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="getCount.aspx.cs" Inherits="getCount" %>

var messageCount; //文章数量
function getCount(paramCount)
{
messageCount =paramCount;
putCount（）;
}
getCount(<%= messageCount %>)

同时在原有页面里去掉一段
showCount.htm<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>显示数据</title>
    <script   language="javascript" type="text/javascript">
    function putCount()
    {
    document.getElementById("Text1").value = 1;                                    // 将1赋给Text1
    document.getElementById("Text2").value = messageCount;                 // 将messageCount赋给Text2
    }
</script>
</head>
<body>
    <input id="Text1" type="text" />
    <input id="Text2" type="text" />
<script language="javascript" src ="getCount.aspx" ></script>

</body>
</html>
经过这样修改程序就完成了在运行时就会显示

一般来说这种错误在本地是很少见的
因为本地取数据够快
在执行到后面的一段javascript的时候前面的一段javascript已经完成
所以不会出什么问题
但是如果是发布到网上
而取数据的那段是从数据库中取数据
而且加上网络质量不好的话
那么很有可能出现这种情况

转载于:https://www.cnblogs.com/clhed/articles/1192442.html