Javascript 为什么空白警报语句会影响其他代码的执行？

我正在一个网站的头版工作，该网站将有一个显示新闻文章的部分。这些文章将每隔10秒淡入下一篇。由于某些原因，代码仅通过包含两个alert（）语句才能正确执行（请记住，代码尚未完全完成，因此可能会出现其他错误）。它们以前只是为了调试而存在的，但现在，它们似乎有一些功能性的用途。如果没有它们，代码将给出不同的结果（如果有的话）。 我主要是一名Java程序员，所以关于JavaScript alert（）语句可能有一些我不熟悉的特性。我注意到的另一件奇怪的事情是，有时我会多次运行代码而不做任何更改，并得到不同的结果。我在loadArticles（）函数中使用了一些alert（）语句来输出I的值，并且在不更改代码的情况下偶尔会得到不同的结果。到目前为止，我唯一的想法是，我的计算机正在花时间运行允许其他进程完成的语句，但不应该涉及任何多线程

init（）函数是在HTML的onload中调用的，在页面的中央有一个id=“news”的div

最主要的问题是，如果有人能帮我解释为什么我有时不能让文章淡入淡出，那就给他们额外的奖励。我很确定这与文章或容器为null有关，但我还没有时间讨论这个问题

下面是JavaScript：

var article_count = 0;
var count = 0;

function init() {

    getArticleCount();
    loadArticles();
    changeSlide();

    resize();
    resize();

}

function getArticleCount() {

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            article_count = xmlhttp.responseText;

        }

    };

    xmlhttp.open("GET", "getArticleCount.php", true);
    xmlhttp.send();

}

function loadArticles() {
    alert();
    for(i = 1; i <= article_count; i++) {
        alert();
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                alert();
                var news = document.createElement("iframe");
                news.className = "news";
                news.src = "articles/" + xmlhttp.responseText;
                news.style.zIndex = 0 - i;

                var container = document.getElementById("news");
                container.appendChild(news);

            }

        };
        alert();
        xmlhttp.open("GET", "getArticles.php?q=" + i, true);
        xmlhttp.send();
        alert();

    }
}

function changeSlide() {

    var article = document.getElementsByClassName("news")[count];
    var interval = setTimeout(function() {

        var fadeOut = article.fadeOut(1000, function() {

            if(count < article_count) {

                count++;
                changeSlide();

            } else {

                count = 0;
                resetSlides();

            }

        });

    }, 10000);

}

function resetSlides() {

    var articles = document.getElementsByClassName("news");

    for(j = 0; j < article_count; j++) {

        var fadeIn = articles[j].fadeIn(1000);

    }

    changeSlide();

}

function resize() {

    var body = $(document.body);
    var news = $("#news");

    $("#menu_left").width((body.outerWidth() - news.outerWidth()) / 2 - 3);
    $("#menu_right").width((body.outerWidth() - news.outerWidth()) / 2 - 3);
    $("#menu_contact").width(body.outerWidth());

}

var物品计数=0；
var计数=0；
函数init（）{
getArticleCount（）；
装载物品（）；
改变幻灯片（）；
调整大小（）；
调整大小（）；
}
函数getArticleCount（）{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
article_count=xmlhttp.responseText；
}
};
open（“GET”，“getArticleCount.php”，true）；
xmlhttp.send（）；
}
函数loadArticles（）{
警惕（）；
对于（i=1；i删除代码中的
警报调用使其不再工作的原因是因为您的函数
getArticleCount（）
，
loadArticles（）
正在对数据进行异步请求。警报弹出窗口使程序停止，而AJAX请求已停止检索数据，并且在关闭警报弹出窗口时已返回结果

您可以将这两个函数更改为执行回调函数，以让其他函数知道它已完成：

function init() {
    getArticleCount(function() {
        // finished getting article count
        loadArticles(function() {
            // finished loading articles
            changeSlide();
            resize();
            resize();
        });
    });
}

function getArticleCount(callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            article_count = xmlhttp.responseText;
            callback(); // done
        }
    };
    xmlhttp.open("GET", "getArticleCount.php", true);
    xmlhttp.send();
}

function loadArticles(callback) {
    for(i = 1; i <= article_count; i++) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var news = document.createElement("iframe");
                news.className = "news";
                news.src = "articles/" + xmlhttp.responseText;
                news.style.zIndex = 0 - i;

                var container = document.getElementById("news");
                container.appendChild(news);
                callback(); // done
            }

        };
        xmlhttp.open("GET", "getArticles.php?q=" + i, true);
        xmlhttp.send();

    }
}

函数init（）{
getArticleCount（函数（）{
//完成物品计数
loadArticles（函数（）{
//成品装载物品
改变幻灯片（）；
调整大小（）；
调整大小（）；
});
});
}
函数getArticleCount（回调）{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
article_count=xmlhttp.responseText；
回调（）；//完成
}
};
open（“GET”，“getArticleCount.php”，true）；
xmlhttp.send（）；
}
函数loadArticles（回调）{
对于（i=1；i，您的代码中有很多错误，主要与Ajax调用的异步性质有关。您需要更多地了解异步操作编程，以编写正确运行、可靠且一致的代码

alert（）
语句更改异步操作的相对计时（例如Ajax调用与其他代码运行时的相对计时）

通常，停止使用
alert（）
语句作为调试工具，因为它会对计时产生太大的影响。相反，请使用
console.log（）
语句。因为
console.log（）
只输出到控制台，根本不会阻止Javascript线程的执行，它不会像
alert（）
语句那样影响事情的计时

下面是一个简单的示例，向您展示
警报（）
如何改变事件的计时：

var img = new Image();
img.src = "http://somedomain.com/myimg.jpg";
alert("Press OK to continue");
if (img.complete) {
    console.log("image is done loading");
} else {
    console.log("image is not yet done loading");
}

使用alert语句，您将在控制台中获得
图像已完成加载
。如果没有此警报，您将获得
图像尚未完成加载
。此警报已更改代码流


另一个可能影响代码计时的因素是资源是在浏览器缓存中还是必须通过网络加载。在几乎所有情况下，只有在知道资源已加载时才使用资源的正确编写的代码在这两种情况下都将继续工作。但是，在代码编写不好的情况下，您可能会看到另一种情况第一次加载页面时的havior与随后缓存某些资源时的havior


要修复特定代码，您需要异步编程。这意味着在异步操作（如Ajax调用和调用回调）完成时，使用完成处理程序通知其他代码

例如，您的
getArticleCount（）
函数是异步的。它将在
getArticleCount（）
返回后的一段时间内完成其Ajax操作。您可以将其更改为接受如下回调：

function getArticleCount(callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    };
    xmlhttp.open("GET", "getArticleCount.php", true);
    xmlhttp.send();
}

getArticleCount(function(cnt) {
    // in here you can use the article count
});

function loadArticles() {
    for (i = 1; i <= article_count; i++) {
        (function() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var news = document.createElement("iframe");
                    news.className = "news";
                    news.src = "articles/" + xmlhttp.responseText;
                    news.style.zIndex = 0 - i;
                    var container = document.getElementById("news");
                    container.appendChild(news);
                }
            };
            xmlhttp.open("GET", "getArticles.php?q=" + i, true);
            xmlhttp.send();
        })();
    }
}

然后你就这样使用它：

function getArticleCount(callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    };
    xmlhttp.open("GET", "getArticleCount.php", true);
    xmlhttp.send();
}

getArticleCount(function(cnt) {
    // in here you can use the article count
});

function loadArticles() {
    for (i = 1; i <= article_count; i++) {
        (function() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var news = document.createElement("iframe");
                    news.className = "news";
                    news.src = "articles/" + xmlhttp.responseText;
                    news.style.zIndex = 0 - i;
                    var container = document.getElementById("news");
                    container.appendChild(news);
                }
            };
            xmlhttp.open("GET", "getArticles.php?q=" + i, true);
            xmlhttp.send();
        })();
    }
}


至于你的
.fadeOut（）
和
.fadeIn（）
操作，这些不是本机DOM方法，因此您不能像尝试那样在DOM对象上调用它们。您似乎正在尝试使用具有此名称的jQuery方法。为此，必须将jQuery加载到页面中，然后必须创建包含相关DOM对象的jQuery对象并调用
.fadeOut（）
和
.fadeIn（）
在jQuery对象上，而不是在DOM对象上


您的
loadArticles（）
函数可以修复