Как объединить две анонимные функции в jQuery

Question

Как я могу, если возможно, объединить две анонимные функции вместе, чтобы один за другим выполнялся?

Моя попытка:

$(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); 
}); 

Answer 1

попробовать это вместо того, чтобы (это все о логике):

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 вы добавляете класс нагрузки, а затем, как только вы закончили загрузку, то вы» повторное удаление класса в качестве последнего, что вы делаете.

Ostensibly, однако, я бы структурировать больше, как это: (предполагается, что текущий выпуск [> = 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'] 
    ]); 
}); 

И потому, что вы пользуетесь отложила, чтобы ждать, пока каждая вещь делается , вы не связываете дрожание (yay IE bugs), ваш код чист для того, что вы намереваетесь, чтобы произойти, и вы приказали, чтобы все было правильно.

Надеюсь, это сделало то, что вы в основном предназначили, и помогает.

Я также призываю вас к «пространству имен» ваших объектов. Я продлил предыдущий пример сделать это ниже:

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 может быть большая новая вещь, чтобы откусить, поэтому, если он не имеет смысла, не стоит беспокоиться, но это делает код гораздо более intentful того, что вы хотите, чтобы произошло. Также обратите внимание, что я убедился в том, что хочу добавить что-то еще, но #NEWFUNCTION не был добавлен вовремя. (также всегда называйте ваши анонимные функции, что упрощает отслеживание stacktrace.)

Итак, этот последний пример на самом деле получил вид сложный. Я добавил 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!!'); 
} 

---

postscript: я не тестировал это, я написал его в основном из своего рабочего пространства на основе того, что вы хотели, и поэтому у меня могут быть некоторые ошибки, но это должно эффективно делать то, что вы хотите.

Answer 2

Почему не Jus t положить все в одну анонимную функцию? Позвоните preload(), как обычно.

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

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

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

}); 

Answer 3

$(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); 
});