1

如果可能的话，我如何将两个匿名函数连接在一起，以便一个在另一个完成后运行？

我的尝试：

    $(function() { 
        $('body').addClass("loading"); 
        function preload(arrayOfImages) {
            $(arrayOfImages).each(function(){
                $('<img/>')[0].src = this;
            });
        }

    },
    $(function() { 
        $('body').removeClass("loading"); 
        }); );

功能：

    $(function() { 
        $('body').addClass("loading"); 
        function preload(arrayOfImages) {
            $(arrayOfImages).each(function(){
                $('<img/>')[0].src = this;
            });
        }

    });

    $(function() { 
        $('body').removeClass("loading"); 
        });

JCOLEBRANDS 代码：

   function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $(this[0]).src = this[1];
    });
    $('body').removeClass("loading"); 
}
$(function() { 
    $('body').addClass("loading"); 
})


$(document).ready(function () {     


   var preloadi = [
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ];



    preload(preloadi);
});
4

3 回答 3

2

试试这个（这都是关于逻辑的）：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $(this[0]).src = this[1];
    });
    $('body').removeClass("loading"); 
}
$(function() { 
    $('body').addClass("loading"); 
};
///
/// elsewhere
///

///I'm also updating your array call because it doesn't make much sense, sadly to me
///otherwise you're overwiting all images with the same image every time. 
///I think it makes much more sense to have a set of hidden images in the 
/// footer of the page so the browser keeps them in memory/cache
$(document).ready(function () {
   preload([
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ]);
 });

因此，onload 您正在添加加载类，然后在完成加载后，您将删除该类作为您做的最后一件事。

然而，从表面上看，我将它的结构更像这样：（假设当前版本 [>=1.8] 的 jQuery）

function loadSomeImages(arrayOfImages){
  $.Deferred(function(){

    $('body').addClass("loading"); 

  }).then(function(){

    $(arrayOfImages).each(function(){
      $(this[0]).src = this[1];
    });

  }).done(function(){

    $('body').removeClass("loading"); 

  }).resolve();
}
///
/// elsewhere
///
$(document).ready(function () {
   preload([
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ]);
 });

而且因为您使用 deferred 来等待每件事都完成，所以您不会束缚抖动（耶 IE 错误），您的代码对于您打算发生的事情是干净的，并且您已经下令将事情放入正确的方式。

希望这符合您的基本意图，并有所帮助。

我还敦促您为您的对象“命名空间”。我在下面扩展了前面的示例：

window.sephiith = window.sephiith | {};
window.sephiith.loadSomeImagesDeferred = null;
window.sephiith.loadSomeImages = function loadSomeImages(arrayOfImages){
  sephiith.loadSomeImagesDeferred = $.Deferred(function _startArrayOfImages(){

    $('body').addClass("loading"); 

  });
  sephiith.loadSomeImagesDeferred.then(function _applyArrayOfImages(){

    $(arrayOfImages).each(function(){
      $(this[0]).src = this[1];
    });

  });

  sephiith.loadSomeImagesDeferred.done(function _doneArrayOfImages(){

    $('body').removeClass("loading"); 
    sephiith.loadSomeImagesDeferred = null;
  });
  return sephiith.loadSomeImagesDeferred;
}
///
/// elsewhere
///
$(document).ready(function () {
   preload([
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ]);
 }).resolve();

这种命名空间确保您的代码不会干扰“别人的”代码。虽然看起来有点矫枉过正，但随着时间的推移，这种命名空间是一个很好的方向。您现在还可以查看sephiith.loadSomeImagesDeferred代码中其他位置是否有值，这样您就可以知道您仍在加载图像，这可以是也很有帮助。也许现在您想在完成后做其他事情？

if(sephiith.loadSomeImagesDeferred) /* sanity check to make sure we didn't already null it out */ {
  // TODO: track sephiith.loadSomeImagesDeferred to add a new function #NEWFUNCTION
  sephiith.loadSomeImagesDeferred.then(function _NEWFUNCTION(){ /* do more stuff here */ });
} else {
  console.log( 'sephiith.loadSomeImagesDeferred was already nulled out before #NEWFUNCTION!!' );
}

因此，您可以在页面加载时构建所有这些延迟项目，这样当您点击时，loadSomeImages(things);您将在完成之前启动所有这些项目。

我意识到这Deferred可能是一个新的大问题，所以如果它没有意义，不用担心，但这会让你的代码更加专注于你想要发生的事情。另请注意，我已确保告诉自己我想添加其他内容，但#NEWFUNCTION没有及时添加。（另外，始终命名您的匿名函数。它使堆栈跟踪跟踪变得更加容易。）

所以，最后一个例子实际上有点复杂。我在其上方添加了一个 HR，以便更容易确定我“跳过鲨鱼”的位置。而且因为我是一个肛门开发人员，我想在我去的时候让事情变得更干净......这里有一些更多的改进，希望这个代码进展是有意义的：

window.sephiith = window.sephiith | {};
sephiith.loadSomeImagesDeferred = null;
sephiith._startArrayOfImages = function _startArrayOfImages(){
    $('body').addClass("loading"); 
};
sephiith._doneArrayOfImages = function _doneArrayOfImages(){

    $('body').removeClass("loading"); 
    sephiith.loadSomeImagesDeferred = null;
    sephiith._ArrayOfImages = {};
};
sephiith._ArrayOfImages = {};
sephiith._applyArrayOfImages = function _applyArrayOfImages(){

    $(sephiith._ArrayOfImages).each(function(){
      $(this[0]).src = this[1];
    });

};

sephiith.loadSomeImages = function loadSomeImages(arrayOfImages){
  sephiith._ArrayOfImages = arrayOfImages;

  sephiith.loadSomeImagesDeferred = $.Deferred(sephiith._startArrayOfImages);

  sephiith.loadSomeImagesDeferred.then(sephiith._applyArrayOfImages);

  sephiith.loadSomeImagesDeferred.done(sephiith._doneArrayOfImages);
  return sephiith.loadSomeImagesDeferred;
}
///
/// elsewhere
///
$(document).ready(function () {
   preload([
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ]).resolve();
 });

///
/// elsewhere
/// notice we're still loading the page, so we haven't called the onready of the preload
///
if(!sephiith._newFunction) {
  sephiith._newFunction = function _NEWFUNCTION(){ /* do more stuff here */ console.log(sephiith._ArrayOfImages); };
} else {
  console.log('sephiith._newFunction was already defined, not defining again');
}


if(sephiith.loadSomeImagesDeferred) {
  // TODO: track sephiith.loadSomeImagesDeferred to add a new function #NEWFUNCTION
  sephiith.loadSomeImagesDeferred.then(sephiith._newFunction);
} else {
  console.log( 'sephiith.loadSomeImagesDeferred was already nulled out before sephiith._newFunction could be added!!' );
}

后记：我没有对此进行测试，我基本上是根据您的需要从我的工作空间编写的，所以我可能有一些错误，但这应该有效地满足您的需求。

于 2013-05-29T00:23:29.887 回答
0

为什么不把所有东西都放在一个匿名函数中呢？preload()像往常一样打电话。

$(function() { 
    $('body').addClass("loading"); 

    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
        });
    }

    $('body').removeClass("loading"); 

});
于 2013-05-28T23:31:50.510 回答
0 
$(document).ready(function () {     
    var preload = [
           'WCMSWR/_assets/images/images/1.png',
           'WCMSWR/_assets/images/images/2.png',
           'WCMSWR/_assets/images/images/3.png'
    ];

    function preload(arrayOfImages) {
        $('body').addClass("loading");
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
        });
        $('body').removeClass("loading");
    }

    preload(preload);
});
于 2013-05-28T23:31:54.713 回答