Javascript 动态加载脚本会更改其行为_Javascript_Javascript Framework_Jquery Events_Paperjs

Javascript 动态加载脚本会更改其行为

javascript

Javascript 动态加载脚本会更改其行为,javascript,javascript-framework,jquery-events,paperjs,Javascript,Javascript Framework,Jquery Events,Paperjs,我想在按下按钮打开动画后加载paperjs，但如果在页面加载后加载纸张，paperscript似乎不起作用如果注释掉setTimeout并取消注释直接$。getScript-paperjs将触发警报（'hi'）。我不明白 <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script>

我想在按下按钮打开动画后加载

paperjs

，但如果在页面加载后加载纸张，paperscript似乎不起作用

如果注释掉

setTimeout

并取消注释直接

$。getScript

-paperjs将触发

警报（'hi'）

。我不明白

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
                $("#jq").text("jQuery is now loaded.")
                var lateLoad = function() {
                    $.getScript(paperUrl, function() {
                        $("#pp").text("Paperjs is now loaded.");
                    });
                };
                //setTimeout(lateLoad, 100);
                $.getScript(paperUrl, function() {
                    $("#pp").text("Paperjs is now loaded.");
                });
            });
        </script>
    </head>
    <body>
        <script type="text/paperscript" canvas="myCanvas">
            $('body').css({"background-color": "#999"});
            alert('hi!');
        </script>
        <p id="jq">jQuery NOT loaded yet.</p>
        <p id="pp">Paperjs NOT loaded yet.</p>
    </body>
</html>


$（文档）.ready（函数（）{
var paperUrl=http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
$（“#jq”）.text（“jQuery现在已加载。”）
var lateLoad=函数（）{
$.getScript（paperUrl，函数（）{
$（“#pp”）.text（“Paperjs现在已加载。”）；
});
};
//设置超时（延迟加载，100）；
$.getScript（paperUrl，函数（）{
$（“#pp”）.text（“Paperjs现在已加载。”）；
});
});
$（'body'）.css（{“背景色”：“#999”}）；
警惕（“嗨！”）；
jQuery尚未加载
尚未加载Paperjs

我在Windows7x64上使用的是Chrome23.0.1271.97M。有人知道这里发生了什么吗？

我认为通过下载更容易。您只需要一个

require.config

对象，在main.js中定义：

requirejs.config({
    paths : {   
        'jquery' : "path/to/jquery"
        'paper' : "path/to/paper"
    },
    shim: {
        'jquery' : {
            exports: 'jQuery'
        },
        'paper' : {
            exports: 'paper'
        }
    }
});

您需要通过

data main

属性加载带有上述配置的require.js：

<script data-main="scripts/main.js" src="scripts/require.js"></script>

当你想装入你的文件时，你只需这样做

var paperStuff = require('paperStuff');
...

将paperscript代码移动到外部文件（即pstest.js）中，并将lateLoad修改为：

var lateLoad = function() {
    $.getScript('http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js',
    function() {
      $("#pp").text("Paperjs is now loaded.");
      $.getScript("pstest.js");
    } )
}

我想我也找到了一个解决方法-

paper.PaperScript.load（）

或详细说明：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                $("#jq").text("jQuery is now loaded.")
                var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
                var lateLoad = function() {
                    $.getScript(paper_url, function() { 
                        $("#pp").text("Paperjs is now loaded.");
                        paper.PaperScript.load(); // <-- The fix!
                    });
                };
                setTimeout(lateLoad, 1000);
                //$.getScript(paperUrl, function() {
                //    $("#pp").text("Paperjs is now loaded.");
                //});
            });
        </script>
    </head>
    <body>
        <script type="text/paperscript" canvas="myCanvas">
            $('body').css({"background-color": "#999"});
            alert('hi!');
        </script>
        <p id="jq">jQuery NOT loaded yet.</p>
        <p id="pp">Paperjs NOT loaded yet.</p>
    </body>
</html>


$（文档）.ready（函数（）{
$（“#jq”）.text（“jQuery现在已加载。”）
var paperUrl=http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
var lateLoad=函数（）{
$.getScript（文件url，函数（）{
$（“#pp”）.text（“Paperjs现在已加载。”）；
paper.PaperScript.load（）；//加载脚本的解决方案相当复杂，jquery本身做得很好。我不确定这是否修复了任何问题，或者是否需要另一个javascript依赖项……始终显示带有警报（'hi'）的脚本，因为它在全局范围内。您需要在$.getScript（）中加载它作用域。是否可以将其存储在单独的文件中，并在paperjs getScript加载中使用第二个getScript（）调用加载它？是否注意到type=“text/paperscript”？因为这会导致浏览器跳过它，只有paperjs执行它。啊，好吧。那没关系。我不使用paperjs。也许如果你加载paperjs，它会在执行加载的回调之前先计算页面的值？如果你能在getScript中添加一些换行符，尤其是在paper.PaperScript.load（）之前，那就更好了；。因为我必须在页面上搜索“.load”才能了解你做了什么以及在哪里；）你是对的，我也花了很长时间才弄明白。我希望现在能解决它。我最近才学会回调缩进的node.js约定。真漂亮。
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                $("#jq").text("jQuery is now loaded.")
                var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
                var lateLoad = function() {
                    $.getScript(paper_url, function() { 
                        $("#pp").text("Paperjs is now loaded.");
                        paper.PaperScript.load(); // <-- The fix!
                    });
                };
                setTimeout(lateLoad, 1000);
                //$.getScript(paperUrl, function() {
                //    $("#pp").text("Paperjs is now loaded.");
                //});
            });
        </script>
    </head>
    <body>
        <script type="text/paperscript" canvas="myCanvas">
            $('body').css({"background-color": "#999"});
            alert('hi!');
        </script>
        <p id="jq">jQuery NOT loaded yet.</p>
        <p id="pp">Paperjs NOT loaded yet.</p>
    </body>
</html>