javascript - 具有 sleep /超时功能的 jQuery 请求循环

Question

我一直在尝试创建一个 jQuery 请求循环，根据结果每 X 秒重新加载一次内容。

我有这个JS:

$(document).ready(function(){
    function init(){
        $.ajax({
            url: 'screen.php',
            data: {
                'screen' : <?php echo $screen_id; ?>
            },
            async: true,
            success: function(r){
                JSON.parse(r, function(k, v){
                    if(k == 'screen_content'){
                        var content = v;/* $('.content').html(v); */
                    }

                    if(k == 'visible_seconds'){
                        setTimeout($('.content').html(content),v);
                        /* (function(){}).delay(timer); */
                        /* $().delay(function(msg) { console.log(msg); }, v, 'Hello'); */
                    }
                });

                /* init(); */
            }
        });
    }

    init();
});

结果是一个 JSON 字符串，其中包含 X 个配对的“screen_content”和“visible_seconds”。我需要在“visible_seconds”秒内显示“screen_content”，然后使用 JSON 中的下一个内容更改内容 - 当所有内容都显示完毕后，一切都会重新开始(这样我们就可以获取新内容)

在我看来这似乎很简单，但我无法为其创建 jQuery :/

Answer 1

你需要这样的东西:

$(document).ready(function() {
    function getContent(){
        $.ajax({
            url: 'screen.php',
            data: {
                'screen' : <?php echo $screen_id; ?>
            },
            async: true,
            success: function(contentArray){
                return showAllContent(contentArray);
            }
        });
    }

    var i = 0;
    function showContent(contentArray, count){
        var currContentData = contentArray[count];
        $('.content').html(currContentData.content);
        setTimeout(function() {
            return showAllContent(contentArray);
        }, currContentData.duration);
    }

    function showAllContent(contentArray){
        if(i === contentArray.length){
            i = 0;
            return getContent(showAllContent);
        }
        return showContent(contentArray, i++);
    }

    getContent();
});

我假设您的 ajax 调用返回以下结构的数据:

[{
    content: 'content 1', 
    duration: 1000
}, {
    content: 'content 2',
    duration: 2000
}]

摆弄虚拟函数而不是ajax调用here .