Question

基本设置是一个简单的JSON文件，我通过ajax将其拉入页面。现在我已经使用此代码正常工作了

$(document).ready(function () {
            var tour = $('.js-featureTour');
            $.ajax({
                    type: "GET",
                    url: "tour.json",
                    dataTyple: "json",
                    success: function (result) {
                        var imgSrc = result.image;
                        $('.js-featureTourTitle').text(result.tourTitle);
                        $('.js-featureTourDesc').html(result.tourDesc);
                        $('.js-featureTourImg').attr('src', imgSrc);
                    }
                })
            });

这适用于我的测试JSON文件，但实际上我必须使用的是这样的

{
    "tour1": {
        "tourTitle": "Test Title 1",
        "tourDesc": "description 1",
        "image": "/main1.jpg"
    },
    "tour2": {
        "tourTitle": "Test Title 2",
        "tourDesc": "description 2",
        "image": "/main2.jpg"
    },
    "tour3": {
        "tourTitle": "Test Title 3",
        "tourDesc": "description 3",
        "image": "/main3.jpg"
    }
}

我真正想要的是成功阶段，阅读＆＃34; tour1＆＃34;将它插入页面，然后等待一下，然后阅读＆＃34; tour2＆＃34;然后写下＆＃34; tour1＆＃34;信息，然后为＆＃34; tour3＆＃34;做同样的事情。有人可以帮我从这里出去吗？我被困在这上面的时间超过了我承认的时间。非常感谢任何帮助。

Answer 1

您需要遍历Json对象并使用SetTimeout来延迟DOM中数据的操作。尝试尝试下面的代码。

success: function (result) {
    $.each(results, function(i,result) {
        setInterval(function(){
          var imgSrc = result.image;
          $('.js-featureTourTitle').text(result.tourTitle);
          $('.js-featureTourDesc').html(result.tourDesc);
          $('.js-featureTourImg').attr('src', imgSrc);
        },5000)
    })
}

Answer 2

您可以使用setInterval：

执行此操作

function handleTours(json) { //call this from the callback
    var elements = []; //build a set of elements which will help
    for (key in json) {
        elements.push(key: key, structure: json[key]);
    }
    if (elements.length > 0) { //if there are no elements, do nothing
        var index = 0;
        var intervalID = setInterval(function() { //we store intervalID to stop the repetition when we are at the end of the set
            if (index >= elements.length) {
                clearInterval(intervalID); //we are at the end of the set
            } else {
                //do something with elements[index].key and elements[index].structure
                index++;
            }
        }, 5000);
    }
}

Answer 3

只是为了记录，我得到了它使用这个

success: function (result) {
                    var time = 0;
                    $.each(result, function(i, result) {
                        setTimeout(function(){
                            var imgSrc = result.image;
                            $('.js-featureTourTitle').text(result.tourTitle);
                            $('.js-featureTourDesc').html(result.tourDesc);
                            $('.js-featureTourImg').attr('src', imgSrc);
                            },time)
                            time += 5000;
                        })
                    }

感谢您的帮助！

从JSON中提取多个数据集

3 个答案: