javascript - 用 js 在 twig 中进行循环

Question

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

我有一个数组，下面有 25 个项目。当我在页面上渲染时，然后通过 for 循环，我显示第 10 个项目，而滚动上的其余 15 个项目我通过 ajax 调用显示。在第一个 ajax 调用中，我显示了 10 个项目，其余 5 个项目在第二个 ajax 调用中显示。在此 ajax 调用中，我发送产品 ID，以便我可以从数据库获取产品。

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

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

现在我的代码在两个 ajax 调用中发送 15 个项目 id。

这是代码:-

    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');
        }
    }); 

}