Question

一旦另一个名为loadItems的jQuery函数完成，我想运行一些jQuery代码。 loadItems函数来自IAS jQuery插件https://github.com/webcreate/infinite-ajax-scroll

如何使用jQuery

执行此操作

loadItems函数是：

    /**
     * Loads items from certain url, triggers
     * onComplete handler when finished
     *
     * @param string   the url to load
     * @param function the callback function
     * @param int      minimal time the loading should take, defaults to $.ias.default.loaderDelay
     * @return void
     */
    function loadItems(url, onCompleteHandler, delay)
    {
        var items = [],
            container,
            startTime = Date.now(),
            diffTime,
            self;

        delay = delay || opts.loaderDelay;

        $.get(url, null, function (data) {
            // walk through the items on the next page
            // and add them to the items array
            container = $(opts.container, data).eq(0);
            if (0 === container.length) {
                // incase the element is a root element (body > element),
                // try to filter it
                container = $(data).filter(opts.container).eq(0);
            }

            if (container) {
                container.find(opts.item).each(function () {
                    items.push(this);
                });
            }

            if (onCompleteHandler) {
                self = this;
                diffTime = Date.now() - startTime;
                if (diffTime < delay) {
                    setTimeout(function () {
                        onCompleteHandler.call(self, data, items);
                    }, delay - diffTime);
                } else {
                    onCompleteHandler.call(self, data, items);
                }
            }
        }, 'html');
    }

它在HTML中被调用：

<script type="text/javascript">
        jQuery.ias({
        container : '.category-products',
            item: '.products-grid',
            pagination: '.toolbar-bottom',
        next: '.next',
        loader: '<img src="http://example.com/skin/frontend/bootstrapped/default/images/ajax-loader.gif" /> Loading more products, please be patient...',
            onPageChange: function(pageNum, pageUrl, scrollOffset) {
            // This will track a pageview every time the user scrolls up or down the screen to a different page.
            path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/');
            _gaq.push(['_trackPageview', path]);
        },
            triggerPageTreshold: 100,
        thresholdMargin: 700,
        trigger: 'Load more items',
        history: true,
        onLoadItems: function(items) {
            jQuery.each(items, function(i, ul){
                jQuery(ul).find('select.qtychange').customSelect()
            });
        }
     });
jQuery(document).ready(function() {
    jQuery().UItoTop({ easingType: 'easeOutQuart' });       
});
</script>

Answer 1

该功能已经提供了回调功能;在调用onCompleteHandler函数时，只需在loadItems参数中提供匿名函数即可。像这样：

loadItems('/foo.php', function(data, items) {
    console.log('loading complete');
    console.log(data);
    console.log(items);
});

Answer 2

最后通过向插件选项添加onRenderComplete来实现它，如下所示。

<script type="text/javascript">
        jQuery.ias({
        container : '.category-products',
            item: '.products-grid',
            pagination: '.toolbar-bottom',
        next: '.next',
        loader: '<img src="http://example.com/skin/frontend/default/default/images/ajax-loader.gif" /> Loading more products, please be patient...',
            onPageChange: function(pageNum, pageUrl, scrollOffset) {
            // This will track a pageview every time the user scrolls up or down the screen to a different page.
            path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/');
            _gaq.push(['_trackPageview', path]);
        },
            triggerPageTreshold: 100,
        thresholdMargin: 700,
        trigger: 'Load more items',
        history: true,
        onLoadItems: function(items) {
            jQuery.each(items, function(i, ul){
                jQuery(ul).find('select.qtychange').customSelect()
            });
        },
        onRenderComplete: function () {
            console.log('it worked');
            // added my code here
        }
     });
</script>

奇怪的是，在插件文档中没有提到它，但我在代码中看到并且只是给了它一个镜头。

函数finsied后执行javascript

2 个答案: