Nativescript ListViewページの読み込み負荷の詳細

Question

私はをビューのXMLファイルのプロジェクト内で使用しています。
ListViewには、リストビューの最後の項目が表示されます。が表示されます。以上説明について

：リストビューは、2つの要素を示すテンプレート項目を含む、一つは<Label>であり、他の一つは<Image>

問題である：それは、私がアプリケーションを開いたときにすることです複数回読み込まれます。 ¿理由は何ですか？どのように防止できますか？

home.xml

<drawer:rad-side-drawer id="drawer"> 
<drawer:rad-side-drawer.mainContent> 

    <!-- Home page contents --> 
    <stack-layout loaded="contentLoaded"> 

    <ListView items="{{ photoList }}" id="photoList" row="1" colSpan="2" loadMoreItems="loadMorePhotos"> 
     <ListView.itemTemplate> 
      <GridLayout columns="*, auto" rows="auto,*"> 
       <Label row="0" imageid="{{id}}" text="{{title}}"/> 
       <Image row="1" stretch="fill" src="{{picture}}"/> 
      </GridLayout> 
     </ListView.itemTemplate> 
    </ListView> 

    </stack-layout> 

</drawer:rad-side-drawer.mainContent> 
<drawer:rad-side-drawer.drawerContent> 
    <widgets:drawer-content /> 
</drawer:rad-side-drawer.drawerContent> 

引出しcontent.xml

<grid-layout class="drawer-content"> 
    <stack-layout> 
     <!-- <label text="Home" tap="navigate" class="{{ selectedPage == 'home' ? 'selected' : '' }}" /> --> 
     <ListView items="{{ menuList }}" id="menuList" row="1" colSpan="2"> 
      <ListView.itemTemplate> 
       <GridLayout columns="*, auto"> 
        <Label text="{{ title }}" galleryid="{{id}}" tap="loadPhotos"/> 
       </GridLayout> 
      </ListView.itemTemplate> 
     </ListView> 
    </stack-layout> 
</grid-layout> 

home.js

var MenuViewModel = require("../../shared/view-models/menu-view-model"); 
var PhotoViewModel = require("../../shared/view-models/photo-view-model"); 
var LoadingIndicator = require("nativescript-loading-indicator").LoadingIndicator; 
var BasePage = require("../../shared/BasePage"); 
var observableModule = require("data/observable") 
var ObservableArray = require("data/observable-array").ObservableArray; 
var topmost = require("ui/frame").topmost; 

var loader = new LoadingIndicator(); 
var loading_options = { 
    message: 'دریافت اطلاعات ...', 
    progress: 1, 
    android: { 
     indeterminate: false, 
     cancelable: false, 
     progressStyle: 0, 
     secondaryProgress: 1 
    }, 
    ios: { 
     details: "", 
     square: false, 
     margin: 10, 
     dimBackground: true, 
     color: "#4B9ED6", 
     mode: 0 // indeterminate 
    } 
}; 

var menuList = new MenuViewModel([]); 
var photoList = new PhotoViewModel([]); 
var current_gallery_id = 1; 
var current_page = 1; 
var isLoading = false; 

var pageData = new observableModule.fromObject({ 
    menuList: menuList, 
    photoList: photoList, 
    page_title: 'آلبوم عکس', 
    current_gallery_id: current_gallery_id, 
    current_page: current_page, 
}); 


var HomePage = function() { 

}; 

HomePage.prototype = new BasePage(); 
HomePage.prototype.constructor = HomePage; 

// Place any code you want to run when the home page loads here. 
HomePage.prototype.contentLoaded = function (args) { 

} 

HomePage.prototype.pageLoaded = function (args) { 
    page = args.object; 
    page.bindingContext = pageData; 
    loader.show(loading_options); 
    menuList.empty(); 
    menuList.load().then(function() { 
     loader.hide(); 
    }); 
}; 

HomePage.prototype.loadPhotos = function (args) { 
    var gallery_id = args.object.galleryid.toString(); 


    photoList.empty(); 
    page.getViewById("drawer").toggleDrawerState(); 

    if (current_gallery_id != gallery_id) { 
     current_gallery_id = gallery_id; 
     current_page = 1; 

     console.log("Gallery Changed to : " + current_gallery_id); 
    } 

    loader.show(loading_options); 
    photoList.load(gallery_id, current_page).then(function() { 
     current_page++; 
     console.log("Page Changed To : " + current_page); 
     loader.hide(); 
     return; 
    }); 


} 

HomePage.prototype.loadMorePhotos = function (args) { 

    var gallery_id = current_gallery_id; 
    loader.show(loading_options); 
    photoList.load(gallery_id, current_page).then(function() { 
     current_page++; 
     console.log("Page Changed To : " + current_page); 
     console.log("Gallery is : " + gallery_id); 
     loader.hide(); 
    }); 
} 


module.exports = new HomePage(); 

デバッグコンソール

Answer 1

バインからloadMorePhotosを防ぐためにtimeoutを使用するようにしてくださいグラム回数が多すぎる...あなたの場合

var timeout = setTimeout(loadMorePhotos, 100); 

    clearTimeout(timeout); 

と呼ばれる：それは複数回ロード

function getMorePhotos(){ 
    var gallery_id = current_gallery_id; 
    loader.show(loading_options); 
    photoList.load(gallery_id, current_page).then(function() { 
    current_page++; 
    console.log("Page Changed To : " + current_page); 
    console.log("Gallery is : " + gallery_id); 
    loader.hide(); 
    }); 

}; 

HomePage.prototype.loadMorePhotos = function (args) { 
    var timeout = setTimeout(getMorePhotos, 100); 
    clearTimeout(timeout); 
}