带有js的twig中的For循环

Question

我在for循环中需要一点帮助。

我有一个数组，在这个数组下，我在页面上呈现了25个items.When，然后通过第一个循环，显示了10个项目，通过ajax调用显示了滚动上的其余15个项目。在第一个ajax调用中，我显示了10个项目，其余5个项目显示在第二个ajax call.In中，这个ajax调用我发送产品id，这样我就可以从数据库中获取产品。

注意：-如果我有100个项目，我发送10个ajax调用。

我想要的是我正在发送的ajax调用，在第一个ajax调用中，我发送了10个项目id，其余5个项目id在第二个ajax调用中发送。

现在，我的代码在两个ajax调用中都发送了15个项目in。

以下是代码：

    var prodId = new Array();
    {% for pd in entities %}
       {% if loop.index <= 10 %}
          prodId.push('{{ pd.id }}');
       {% endif %}
    {% endfor %}

    $(document).ready(function(){
    var count=25;//This is dynamic

    if (count>10) {
        count=count-10;
    }

    $(window).scroll(function(){
            var scrollH = $(window).scrollTop()+$(window).height();
            var documentH = $(document).height();
            var infty_scrl_end=$('#sectiontop').offset().top;   
            if (count>0) {
            console.log(prodId);
                if(scrollH > infty_scrl_end){
                    $.ajax({
                        url: "url_ajax",
                        type: "POST",
                        data: { "data" : prodId },
                        success: function(data) {
                            $(data).appendTo('.container');
                        }
                    }); 
                    count=count-10;
                }
            }


    });
    }); 

谢谢！

Answer 1

你可以使用一个队列来解决这个问题，

var prodId = new Array();
{% for pd in entities %}
    prodId.push('{{ pd.id }}'); //Fill up the total queue
{% endfor %}

$(function() {
    $(window).scroll(function() {
        var scrollH = $(window).scrollTop() + $(window).height();
        var documentH = $(document).height();
        var infty_scrl_end = $('#sectiontop').offset().top;

        if (scrollH > infty_scrl_end){
            loadQueue();
        }
    });

    loadQueue();
});


function loadQueue() {
    if (prodId.length == 0) return;

    //split the queue in parts of 10
    var tmp = new Array();    
    while(tmp.length < 10 && prodId.length > 0) {
        tmp.push(prodId.shift());
    }
    if (tmp.length == 0) return;

    $.ajax({
        url: "url_ajax",
        type: "POST",
        data: { "data" : prodId },
        success: function(data) {
            $(data).appendTo('.container');
        }
    }); 

}