javascript - 将 requirejs 与 fullpage.js 和 scrollmagic 一起使用时，Safari 随机崩溃

Question

我正在尝试根据 use-init 样板建立一个使用 requirejs 的网站。它在大多数系统和大多数浏览器中都能正常工作。但它在随机系统版本（iMac、MBP）和随机 Safari 版本（在 Safari 6、7 和 8 中发生）的 safari 中失败（与 'scrollmagic'、'fullpage.js' 和其他脚本结合使用）。在这种情况下，浏览器只显示了几个元素，在滚动时挣扎并在一段时间后崩溃。

更新：它适用于未压缩的测试设备，但不适用于构建版本（r.js）

虽然我不知道这种行为的原因，但我试图抓住每一个错误。我不知道错误的行为是否是由于我缺乏知识，我是否做了完全错误的事情，或者是否在使用的工具之一中存在错误。所以我想问你——你对我有什么提示吗？

我不确定 requirejs 中插件的正确实现。我认为我正确使用了“scrollmagic”，但我不确定“fullpage.js”。是否可以编写类似模块的“fullpage.js”使用，或者按照下面给出的细节使用正确？已经研究过文档，因为我第一次使用所有的东西，我将不胜感激！

最好的问候
Jakob
—<br> http://jakob.grommas.com/bt/
http://jakob.grommas.com/bt-raw/

万一做错了，这里详细介绍了配置、主要和模块。

配置.js：

require.config({
    deps: ['plugins/console', 'main'],
    paths: {
        domReady: '../components/domReady/domReady',
        TweenMax:  '../components/ScrollMagic/js/_dependent/greensock/TweenMax.min',
        TweenLite: '../components/ScrollMagic/js/_dependent/greensock/TweenLite.min',
        TimelineMax: '../components/ScrollMagic/js/_dependent/greensock/TimelineMax.min',
        jquery: '../components/jquery/dist/jquery.min',
        fullPage: '../components/fullpage.js/jquery.fullPage.min',
        scrollMagic: '../components/ScrollMagic/js/jquery.scrollmagic',
        lazySizes: '../components/lazysizes/lazysizes.min',
        viewportUnits: '../components/viewport-units-buggyfill/viewport-units-buggyfill'
    },

    shim: {
        'fullPage': ['jquery'],
        'scrollMagic': ['jquery', 'TweenMax'],
        'TweenMax': {
            deps: ['jquery'],
            exports: 'TweenMax'
        }
    },
    // Prevent caching issues, by adding an additional URL argument
    urlArgs: 'bust=' + (new Date()).getDate()

});

主.js：

require(['lazySizes']);
require(['viewportUnits']);
require(['modules/fullpage']);
require(['domReady', 'modules/scrollmagic.controller', 'modules/scrollmagic.scene'], function(domReady, Controller, Scenes) {
    'use strict';
    domReady(function () {
        Controller.getController().addScene([
            Scenes.getScene00(),
            Scenes.getScene01()
            //...
        ]);
    });
});

模块/fullpage.js：

define([
    //  Dependencies of the module
    'domReady',
    'jquery',
    'fullPage'
], function (domReady, $) {
    //  Strict mode to prevent sloppy JS
    'use strict';
    domReady(function () {
    //  This function is called once the DOM is ready.
    //  It will be safe to query the DOM and manipulate
    //  DOM nodes in this function.
        var indexAll = {},
            getSectionIndex = $('section').length,
            currentSlide;

        $("#viewport").fullpage({
            sectionSelector: 'section',
            slideSelector: 'article',
            menu: '#menu',
            anchors: ['example1', 'example2', 'example3'],
            autoScrolling: false,
            keyboardScrolling: true,
            continuousVertical: true,
            loopHorizontal: true,
            scrollingSpeed: 800,
            verticalCentered: false,
            easing: 'easeInQuart',
            css3: false,
            fixedElements: '.pinContainer',
            slidesNavigation: false,
            afterRender: function(){
                    // do nothing
            },
            afterLoad: function(anchorLink, index){
                currentSlide = indexAll[index];
                if (index === 1) {
                    // do this
                } else {
                    // do that
                }
                if (index > 2 && index < getSectionIndex - 1) {
                    // do this
                    if (index === 3 || index === getSectionIndex - 2) {
                        // do this
                    } else {
                        // do that
                    }
                } else {
                    // do that
                }
                var ignoreThisShit = anchorLink;    // DIRTY HACK
                ignoreThisShit = 'ignoreThisShit';  // DIRTY HACK
            },
            afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
                var currentSlideIndex = slideIndex + 1;
                indexAll[index] = currentSlideIndex;
                if (index > 3 < getSectionIndex - 3) {
                    // do this
                } else {
                    // do that
                }
                var ignoreThisShit = anchorLink;    // DIRTY HACK
                ignoreThisShit = slideAnchor;       // DIRTY HACK
                ignoreThisShit = 'ignoreThisShit';  // DIRTY HACK
            }
        });
    });
});

模块/scrollmagic.controller.js：

define([
    // Dependencies of the module
    'jquery',
    'scrollMagic'
], function ($, ScrollMagic) {
    // Strict mode to prevent sloppy JS
    'use strict';
    // Private variables
    var _controller = new ScrollMagic.Controller();
    // Public API
    return {
        // Getter for private variable
        getController: function () {
            return _controller;
        },
        // File an event on initialisation
        init: function () {
            $(document).trigger(_controller);
        }
    };
});

模块/scrollmagic.scene.js：

define([
    // Dependencies of the module
    'jquery',
    'TweenMax',
    'scrollMagic'
], function ($, TweenMax, ScrollMagic) {
    // Strict mode to prevent sloppy JS
    'use strict';
    // private functions
    var windowHeight  = $(window).innerHeight();
    function getWindowHeight() {
        return windowHeight;
    }
    // Private variables
    var _scene01 = new ScrollMagic.Scene({
        triggerElement: '#section1',
        triggerHook: 0,
        duration: getWindowHeight
    }).setPin($('#pinContent2'));
    var _scene02 = new ScrollMagic.Scene({
        triggerElement: '#section2',
        triggerHook: 1,
        duration: getWindowHeight
    }).setTween(TweenMax.to('#section1', 1, {backgroundColor: '#000'}));
    // Public API
    return {
        // Getter for private variable
        getScene01: function () {
            return _scene01;
        },
        getScene02: function () {
            return _scene02;
        },
        // File an event on initialisation
        init: function () {
            $(document).trigger(_scene01).trigger(_scene02); // is this right?
        }   
    };
});