Javascript 为什么；文件.样式表“；每刷新3到5次浏览器后返回空值？_Javascript_Jquery_Dom_Browser_Prefixfree

Javascript 为什么；文件.样式表“；每刷新3到5次浏览器后返回空值？

javascript jquery dom browser

Javascript 为什么；文件.样式表“；每刷新3到5次浏览器后返回空值？,javascript,jquery,dom,browser,prefixfree,Javascript,Jquery,Dom,Browser,Prefixfree,我想要实现的是让用户定义我编写的JavaScript文件要处理的特定样式表，下面是我用来获取指定样式表的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="sheet-1.css"> <li

我想要实现的是让用户定义我编写的JavaScript文件要处理的特定样式表，下面是我用来获取指定样式表的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="sheet-1.css">
    <link rel="stylesheet" href="sheet-2.css">
    <link rel="stylesheet" href="sheet-3.css">
    <!-- other css files -->

    <style>
        /* inline styles */
    </style>

</head>
<body>

    <script src="jquery-2.1.1.min.js"></script>
    <!-- some plugins -->

    <script>
        jQuery(document).ready(function($) {

            // user specified stylesheets
            var watchedStyleSheetsNames = [ 'sheet-1.css', 'sheet-2.css', 'sheet-3.css' ]

            var allSheets    = document.styleSheets,
                targetSheets = [];

            for ( var i = watchedStyleSheetsNames.length - 1; i >= 0; i--) {
                Object.keys( allSheets ).forEach ( function (j) {
                    if( allSheets[j].href && allSheets[j].href.indexOf( watchedStyleSheetsNames[i] ) !== -1 ) {
                        targetSheets.push(allSheets[j]);
                    }

                });            

            };

            // result
            console.log( 'Watched Stylesheets Array : ' + targetSheets );

        });
    </script>
</body>
</html>


文件
/*内联样式*/
jQuery（文档）.ready（函数（$）{
//用户指定的样式表
var watchedStyleSheetsNames=['sheet-1.css'，'sheet-2.css'，'sheet-3.css']
var allSheets=document.styleSheets，
targetSheets=[]；
对于（var i=watchedStyleSheetsNames.length-1；i>=0；i--）{
Object.key（allSheets）.forEach（函数（j）{
if（allSheets[j].href&&allSheets[j].href.indexOf（watchedStyleSheetsNames[i]）！=-1）{
目标板推送（所有板[j]）；
}
});            
};
//结果
log（'wasted Stylesheets Array:'+targetSheets）；
});

问题是第一次加载页面时一切正常，然后在3到5次刷新后，

targetSheets的数组

返回空值，这显然会破坏之后所做的一切，然后在再次刷新后，我得到预期值，依此类推。我尝试了所有浏览器，清除了缓存，同样的事情一次又一次发生。下面是我在控制台中得到的图像：

我使用wamp服务器和所有浏览器的最新版本在线和本地测试了我的代码。那么，是什么导致了这个问题，我该如何解决它呢？

谢谢你抽出时间

编辑

我发现答案是因为实现了prefixfree插件，它删除了链接节点，然后在样式标记中重新插入处理过的css。

您正在jQuery

就绪处理程序中查找样式表。jQueryready
处理程序的全部要点是，它在解析HTML之后激发，但在下载和评估所有依赖项之前激发。因此，很明显，有时代码在加载样式表之前运行
您需要等待样式表加载完毕。我所知道的检查链接样式表是否已加载的唯一方法是动态加载它，在设置href
之前查看加载
事件。也许还有其他方法，这是我唯一知道的
例如，在您的情况下，您可以从标记中删除
元素并执行以下操作：
jQuery(document).ready(function($) {

    // user specified stylesheets
    var watchedSheets = [
        { name: 'sheet-1.css' },
        { name: 'sheet-2.css' },
        { name: 'sheet-3.css' }
    ];
    var completed = 0;
    var head = document.querySelector('head');

    watchedSheets.forEach(function(sheet, index) {
        var link = document.createElement('link');
        link.onload  = function() {
            sheet.loaded = true;
            ++completed;
            if (completed === watchedSheets.length) {
                done();
            }
        };
        link.onerror = function() {
            sheet.error = true;
            ++completed;
            if (completed === watchedSheets.length) {
                done();
            }
        };
        link.rel = "styleshet";
        link.href = sheet.name;
        head.appendChild(link);
    });

    function done() {
        var allSheets    = document.styleSheets,
            targetSheets = [];

        Object.keys( allSheets ).forEach ( function (j) {
            var sheet = watchedSheets[j];
            if( !sheet.error && allSheets[j].href && allSheets[j].href.indexOf( sheet.name ) !== -1 ) {
                targetSheets.push(allSheets[j]);
            }
        });            

        // result
        console.log( 'Watched Stylesheets Array : ' + targetSheets );
    }
});

听起来像是比赛条件。要验证其是否为竞争条件，请将该函数置于setTimeout中3秒钟。看看这是否解决了问题。从这里开始，您可能需要查看一些依赖关系管理类型，如requirejs。不幸的是，通过测试，即使代码仍然存在相同的错误。即使我使用这个插件动态加载css并在加载完成后执行代码，同样的错误仍然会发生。我不知道原因是什么？？？当控制台发生错误时，你会收到任何错误吗？加载CSS等问题。？（CSS加载了吗？）这听起来像是某种速率限制或过度活跃的DDoS防御。不，我没有收到任何错误。我还尝试将其作为一个函数，并使用setTimeout inside检查数组的空值，每10毫秒重复一次代码，直到它获得数组的值，但我得到了无限循环。我是stuckit这是一个奇怪的情况，即使与$（窗口）。加载它给我相同的结果如上我想知道什么可能是原因？？