2012-04-04 108 views
2

我有这样的代码:使用Javascript - 脚本加载顺序

$("#pop_mali_oglas").on('click', function(){ 
     TINY.box.show({url:'<?php echo base_url()?>form/novi_unos/<?php echo $p ?>'}); 
     $.getScript("<?php echo JS ?>vendor/jquery.ui.widget.js"); 
     $.getScript("<?php echo JS ?>tmpl.min.js"); 
     $.getScript("<?php echo JS ?>load-image.min.js"); 
     $.getScript("<?php echo JS ?>canvas-to-blob.min.js");   
     $.getScript("<?php echo JS ?>bootstrap.min.js");   
     $.getScript("<?php echo JS ?>bootstrap-image-gallery.min.js");  
     $.getScript("<?php echo JS ?>jquery.iframe-transport.js"); 
     $.getScript("<?php echo JS ?>jquery.fileupload.js"); 
     $.getScript("<?php echo JS ?>jquery.fileupload-ip.js"); 
     $.getScript("<?php echo JS ?>jquery.fileupload-ui.js"); 
     $.getScript("<?php echo JS ?>locale.js");   
     $.getScript("<?php echo JS ?>main.php");  
     return false;      
}); 

第一行最后加载(TINY.box.show({url:'<?php echo base_url()?>form/novi_unos/<?php echo $p ?>'});),我需要它首先加载,然后休息。我怎样才能做到这一点?

回答

1

问题是所有的脚本都是异步加载的,这意味着它们全部被同时触发,这意味着它们很可能会破坏一切。如果你依靠他们正在加载的顺序..

检查出this past answer关于运行函数或任何JavaScript真正接连的方法。

像tkone在他的示例中所示,该函数将在运行所有$ .getScript函数之前首先运行TINY.box.show函数。

$("#pop_mali_oglas").on('click', function(){ 
      scriptload(function() { 
      getscripts() 
      return false; 
     }); 
}); 

function scriptload(callback) { 
tinyboxfunc() 
callback(); 
} 

function tinyboxfunc() { 
TINY.box.show({url:'<?php echo base_url()?>form/novi_unos/<?php echo $p ?>'}); 
}; 

function getscripts() { 
      $.getScript("<?php echo JS ?>vendor/jquery.ui.widget.js"); 
      $.getScript("<?php echo JS ?>tmpl.min.js"); 
      $.getScript("<?php echo JS ?>load-image.min.js"); 
      $.getScript("<?php echo JS ?>canvas-to-blob.min.js");   
      $.getScript("<?php echo JS ?>bootstrap.min.js");   
      $.getScript("<?php echo JS ?>bootstrap-image-gallery.min.js");  
      $.getScript("<?php echo JS ?>jquery.iframe-transport.js"); 
      $.getScript("<?php echo JS ?>jquery.fileupload.js"); 
      $.getScript("<?php echo JS ?>jquery.fileupload-ip.js"); 
      $.getScript("<?php echo JS ?>jquery.fileupload-ui.js"); 
      $.getScript("<?php echo JS ?>locale.js");   
      $.getScript("<?php echo JS ?>main.php"); 
}; 
+0

这不起作用。只有TINY.box被加载,$ .getScript不被调用。 – Sasha 2012-04-04 12:02:48

+0

你检查了任何东西的控制台? – 2012-04-04 12:04:01

+0

是的,TINY.box中只有一个响应。 – Sasha 2012-04-04 12:04:53

1

这些异步加载 - 他们会出现在他们的加载任何为了保证休息前一个加载做的是加载一个最好的东西,然后加载其他的回调。当第一次加载时触发。

喜欢的东西

$.getScript(first script to load, function(){ 
    // other get script functions 
}); 


编辑

显然,这不是关于脚本加载,但执行的顺序。

第一个tinybox行首先被执行,但是调用它的结果在其他行被执行并返回之前可能不可见。这可能是由于tinybox命令异步加载文件。我的上述答案仍然适用,但您需要了解tinybox如何在成功完成异步事件后执行回调。

+0

与此唯一的问题是,他想先运行的功能不是一个getscript;) – 2012-04-04 12:00:55

+0

@MagicDev更新回答谢谢 – tkone 2012-04-04 12:02:36

+0

原来这种方法根本不适用于他:\ – 2012-04-04 12:20:51

2

我猜测,第二个参数(ajax true | false)默认为true,这就是为什么它似乎最后加载。传入0作为第二个参数,强制它同步。

+3

Nooooo!同步是邪恶的!邪恶我告诉你。说真的,虽然JavaScript人们需要对异步操作感到满意,因为他们在各处都会发生。同步不是邪恶的,但可以阻止用户和用户伤心。 – tkone 2012-04-04 12:01:17

+0

@tkone - 我对这两者都很满意,这取决于情况。我只是向OP指出第二个参数指定异步或非异步,这就是它似乎最后加载的原因。 – 2012-04-04 12:17:49

+0

我大部分都是face。。 :) – tkone 2012-04-04 12:24:00

-1

您应该在$ .getScript之前设置$.ajaxSetup

$.ajaxSetup({ 
    async: false 
}); 

为了记录在案,$ .getScript()确实是异步执行的,所以它的设置使用befor它。