2016-03-24 35 views
0

loadItemsという別のjQuery関数が完了したら、jQueryコードを実行したいと思います。関数が終了した後にjavascriptを実行します。

/** 
    * 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に呼び出される:

loadItems機能は、IAS jQueryプラグインから https://github.com/webcreate/infinite-ajax-scroll

私はこの使用してjQueryの

を行うことができますloadItems機能がどのように

です

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

答えて

2

この関数は、すでにコールバック機能を提供しています。 loadItems関数を呼び出すときに、onCompleteHandlerパラメータに無名関数を指定するだけです。 Something likeこの:

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

ありがとうございました。私は 'loadItems()'がどこで呼び出されているのかを調べようとしています。私が見ることができるのは 'onLoadItems:function(items){'です。私は質問を更なる詳細で更新しました – Holly

+1

'loadItems()'関数が投稿した新しいコードに関連しているとは思われません –

1

Got it workingにおけるthe endによってadding an onRenderCompleteへthe plugins optionsとしてbelow。

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

奇妙なことに、プラグインのドキュメントには言及されていませんが、コードで見て、ちょうどそのショットを付けました。

関連する問題