Question

我一直在寻找并试图了解如何在javascript的帮助和使用计时器的情况下改变div，但是不太明白。

我正在使用输出json的API。目前我已经设法用我的函数格式化它，并给每个“元素”（作业）一个独特的div来生活。我现在要做的是做一个使用计时器来显示内容的函数每个div。它必须在没有任何按钮点击的情况下完成。

我的函数中的if语句只是为了限制输出。

我的功能：

function getAllOrdersAjax() {

    $.get('/api/ordersystem', function(data){

        var orderSystemDataAppendToView = [];
        var i = 0;

        $(data).each(function(key, value){

            //Add's up the products sold to customer
            for(var j = 0 in value['order_products'])
            {
                j++
            }

            //Sends the information to view
            orderSystemDataAppendToView.push('<div id="product' + i + '"><h3> ID: ' + value['customer'].id + '</h3>' + '<p> Kundenavn: ' + value['customer'].name +
                '</p>' + '<p> Selger: ' + value['sold_by'].firstname + ' ' + value['sold_by'].lastname + '</p>' +
                '<p> Antall produkter solgt : ' +  j + '</p>' + '<p> Pris : ' +  value['price'] + '</p>' + '</div>');

            if(i === 10){
                return false;
            }

            i++;
        });

        $('#hei').html(orderSystemDataAppendToView).append();

    })
}

对于每个工作，div都会获得一个ID：product0，product1，product2，....

如何在我的索引文件中以设定的间隔一个接一个地显示这些div。那我怎么称呼这个功能呢？

感谢您的帮助！

Answer 1

您只需循环setTimeout()函数并直接使用append()即可。类似的东西：

function getAllOrdersAjax() {

  $.get('/api/ordersystem', function(data){

    var i = 0;
    // We store the element so that we don't look for it at each iteration
    var parent = $('#hei');
    $(data).each(function(key, value){

        //Add's up the products sold to customer
        for(var j = 0 in value['order_products'])
        {
            j++
        }


        setTimeout(function(){
           //Appends the information
           parent.append('<div id="product' + i + '"><h3> ID: ' + value['customer'].id + '</h3>' + '<p> Kundenavn: ' + value['customer'].name +
            '</p>' + '<p> Selger: ' + value['sold_by'].firstname + ' ' + value['sold_by'].lastname + '</p>' +
             '<p> Antall produkter solgt : ' +  j + '</p>' + '<p> Pris : ' +  value['price'] + '</p>' + '</div>');
        }, 1000 * i); // ~ 1s apart (first is instant as you init i=0) 

        i++;

    });
  });
}

使用javascript计时器追加多个div

1 个答案: