按順序運行功能

-1

我有兩個功能在時間上發生衝突。沒有錯誤顯示，但該網站顯然不尊重功能的順序。我如何讓他們安全地串聯起來？按順序運行功能

代碼：

///////////////////////////// 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

感謝任何見解。

來源

2016-04-10 pjldesign

你有一堆功能在那裏。你在說哪兩個？有什麼症狀表明他們「明顯」被「亂序」運行？那是什麼「命令」？ –

我試圖首先加載window.load函數，然後按照它們出現的順序加載mediacheck函數。 mediacheck會封裝另一個控制頁面上基於動畫的動畫的函數。但是，由於衝突，此功能不起作用。 – pjldesign

我開始意識到這可能是因爲主要功能正在window.load上運行而發生的。因此，它必須等待另一個觸發...由於站點容器被設置爲「display：none」，skrollr函數沒有找到它想要動畫的元素。所以我想問題是，有沒有辦法在同一個文檔中的window.load函數之後觸發mediacheck/skrollr函數？ – pjldesign

$(window).load(function() { /*...*/ });設置該函數的回調函數，當窗口的load事件觸發時將觸發該函數。這不會發生在頁面加載過程非常晚的時候，不僅在加載HTML和所有腳本和CSS文件以及所有圖像之後。大多數時候，load是錯誤的事情達成。

一旦設置了load回調（在該回調被調用之前很長時間），就會調用mediaCheck。

如果你想打電話mediaCheck只回調的代碼已運行後，你有兩個選擇：

添加第二個load處理程序：

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

jQuery的保證它會按照它們所附的順序觸發事件回調。

移動電話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(/*...*/); });

來源

2016-04-10 11:06:10

我需要window.load函數，因爲該函數在站點變暗之前顯示加載器...我將mediacheck/skrollr函數插入到window.load中。它仍然沒有工作，但我相信這絕對是朝着正確方向邁出的一步。 – pjldesign

不知道爲什麼，我得到了反對票，但在這裏是爲我工作：

$(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。

來源

2016-04-10 14:50:50 pjldesign

按順序運行功能

回答

相關問題