Question

我有一个需要在页面加载（randomise_colors.js）上运行的文件，但还需要被另一个文件作为回调函数的一部分调用（在infinite_scroll.js中）。 randomise_colors脚本只是遍历页面上的帖子列表，并为每个帖子分配一个在前端使用的数组的颜色。

Infinite Scroll在点击按钮时将新帖子加载到DOM中，但由于randomise_colors.js文件已在页面加载时运行，因此加载的新内容不受此影响，因此我需要再次运行。如果听起来我能以不同的方式解决问题，我可以接受其他建议，我不是JS专家。

目前我正在获取Uncaught ReferenceError：randomise_colours未定义引用此行的infinite_scroll.js：

randomise_colours.init();

我在 app.js

中调用需要加载到document.ready上的所有文件

require(['base/randomise-colours', 'base/infinite-scroll'],
    function(randomise_colours, infinite_scroll) {

            var $ = jQuery;

            $(document).ready(function() {

                infinite_scroll.init();
                randomise_colours.init();

            });

    }
);

这是 infinite_scroll.js ，它初始化无限滚动并具有回调功能。只要使用Infinite Scroll jQuery plugin通过AJAX加载新项目，就会运行回调函数。我已将asterix放在需要从randomise_colors.js运行randomise_colors.init（）函数的区域。

define(['infinitescroll'], function() {

    var $ = jQuery,
        $loadMore = $('.load-more-posts a');

        function addClasses() {
            **randomise_colours.init();**
        };

    return {

        init: function() {
            if($loadMore.length >= 1) {
                this.setUp();
            } else {
                return false;
            }
        },

        setUp: function() {
            this.initInfiniteScroll();
        },

        initInfiniteScroll: function() {
            $('.article-listing').infinitescroll({
                navSelector  : '.load-more-posts',            
                nextSelector : '.load-more-posts a',    
                itemSelector : '.standard-post'          
            }, function(newItems) {
                addClasses();
            });

            //Unbind the standard scroll-load function
            $(window).unbind('.infscr');

            //Click handler to retrieve new posts
            $loadMore.on('click', function() {
                $('.article-listing').infinitescroll('retrieve');
                return false;
            });
        }

    };

});

这是我的 randomise_colors.js 文件，该文件在加载时运行良好，但需要在加载新内容后再次重新调用。

define([], function() {

    var $ = jQuery,
        $colouredSlide = $('.image-overlay'),

        colours = ['#e4cba3', '#867d75', '#e1ecb9', '#f5f08a'],
        used = [];

        function pickRandomColour() {

            if(colours.length == 0) {
                colours.push.apply(colours, used);
                used = [];
            }
            var selected = colours[Math.floor(Math.random() * colours.length)]; 
            var getSelectedIndex = colours.indexOf(selected);
            colours.splice(getSelectedIndex, 1);
            used.push(selected);

            return selected;
        };

    return {

        init: function() {
            if($colouredSlide.length >= 1) {
                this.setUp();
            } else {
                return false;
            }
        },

        setUp: function() {
            this.randomiseColours();
        },

        randomiseColours: function() {
            console.log('randomise');
            $colouredSlide.each(function() {
                var newColour = pickRandomColour();
                $(this).css('background', newColour);
            });
        }

    };

});

Answer 1

您必须在infiniteScroll文件中引用randomiseColours。因此，您需要将定义函数更改为以下内容：

define(['infinitescroll', 'randomise-colours'], function(infiniteScroll, randomise_colours)

请记住，在使用require时，您需要通过define函数引用所有变量，否则将无法识别它们。

在RequireJS文件之间传递函数

1 个答案: