Выполнить функции в порядке

Question

У меня есть две функции, которые конфликтуют с синхронизацией. Ошибок не отображается, но сайт явно не учитывает порядок функций. Как я могу безопасно их запускать в тандеме?

Код:

///////////////////////////// FADE IN ALL CONTENT 

$(window).load(function() { 
    $("#site-loader").fadeOut("slow", function() { 
     $("#site-container").fadeIn("slow"); 
    }); 
}); 

///////////////////////////// SKROLLR/MEDIACHECK 

mediaCheck({ 
    media: '(max-width: 1024px)', 
    entry: function() { 
     skrollr.init().destroy(); 
    }, // END MOBILE MEDIACHECK 
    exit: function() { 
     var s = skrollr.init({ 
      // beforerender: function(data) { 
      //  return data.direction == 'down'; 
      // }, 
      render: function(data) { 
       //Log the current scroll position. 
       console.log(data.curTop); 
      }, 
      // smoothScroll: false, 
      forceHeight: false, 
      constants: { 
       screen: function() { 
        return $(window).height(); 
       } 
      } 
     }); 
     $(function() { 
      skrollr.get().refresh(); 
     }); 
    } 
}); //END DESKTOP MEDIACHECK 

Спасибо за любую проницательность.

Answer 1

$(window).load(function() { /*...*/ }); устанавливает обратный вызов этой функции, который будет запущен при возникновении события load окна. Это происходит не до самого позднего процесса загрузки страницы, после загрузки не только HTML и всех скриптов и файлов CSS, но и всех изображений. В большинстве случаев load - это неправильная вещь.

Звонок в mediaCheck происходит после установления обратного вызова load (задолго до вызова обратного вызова).

Если вы хотите вызвать mediaCheck только после код в обратном вызове был запущен, у вас есть два варианта:

1. Добавить второй load обработчика:

   $(window).load(function() { 
       mediaCheck(/*...*/); 
   }); 
   

   JQuery гарантирует что он запускает обратные вызовы событий в том порядке, в котором они были прикреплены.

2. Перемещение mediaCheck вызова в существующего load обработчика.

Скорее, хотя, что вы хотите сделать, это удалить load обработчик (если ждет всех изображений на самом деле не является целью), переместить script теги в самом конце HTML (перед закрытие </body> тег), а затем просто поставить два бита кода один за другим:

$("#site-loader").fadeOut("slow", function() { 
     $("#site-container").fadeIn("slow"); 
    }); 
}); 
mediaCheck(/*...*/); 

Если вы не контролируете, где вы положили script теги, вы могли бы использовать JQuery-х ready вместо:

$(document).ready(function() { 
    $("#site-loader").fadeOut("slow", function() { 
      $("#site-container").fadeIn("slow"); 
     }); 
    }); 
    mediaCheck(/*...*/); 
}); 

Answer 2

не знаю, почему я получил вниз голос, но вот то, что работает для меня:

$(window).load(function() { 
    $("#site-loader").fadeOut("slow", function() { 
     $("#site-container").fadeIn("slow"); 
    }); 
    if ($(window).width() > 1024) { 
     setTimeout(function() { 
      var s = skrollr.init({ 
       beforerender: function(data) { 
        return data.direction == 'down'; 
       }, 
       render: function(data) { 
        console.log(data.curTop); 
       }, 
       smoothScroll: false, 
       forceHeight: false, 
       constants: { 
        screen: function() { 
         return $(window).height(); 
        } 
       } 
      }); 
      $(function() { 
       skrollr.get().refresh(); 
      }); 
     }, 3000); 
    } 
    $(window).on('resize', function() { 
     if ($(window).width() <= 1024) { 
      skrollr.init().destroy(); 
     } 
    }); 
}); 

бы использовать SetTimeout.