javascript - 我想根据时间和持续时间显示 json 中的元素，并且间隔被 settimeout 中断

Question

我有一个 json 文件，其结构如下:

[{"text_content":"aaaaa","text_duration":15,"start_time":"2015-10-07 23:25:29"},
{"text_content":"aawwaaaaa","text_duration":15,"start_time":"2015-10-07 23:25:44"},
{"text_content":"bbaawwaaaaa","text_duration":15,"start_time":"2015-10-07 23:25:59"}, etc.

我的网页上有一个 div user-text我想用从此 json 中获取的字符串填充它。但有一个条件 - 我想在分配给它的时间和分配给它的持续时间段内显示第一个文本。 因此，根据我的示例，我想显示 aaaaa对于 15秒在2015-10-07 23:25:29 ， ETC。 我写了一个jquery脚本:

    var results =[];
    var cursor = 0;

    function myFunction () {
        $.getJSON('get_json.php', function(json) {
            results = json;
            cursor = 0;

            // Now start printing
            if(results.length == 0){
                $('#user-text').hide('fast', function() {
                    $('#user-text').html("there is no text at the moment");
                    $('#user-text').show('fast');
                });
            }else{
                printNext();
            }
        });
    }

    function printNext(){
        if(cursor == results.length){
            // Reset the cursor back to the beginning.
            cursor = 0;
        }

        var textDate = results[cursor].start_time;
        var textMsg = results[cursor].text_content;
        var dateOfText = new Date(textDate).setMilliseconds(0);
        var duration = results[cursor].text_duration;
        //now we're checking every second if there is any text to display at that time
        var myInterval = setInterval(check, 1000);

        function check() {

            var currentDate = new Date().setMilliseconds(0);

            if (currentDate - dateOfText ==0) {
            clearInterval(myInterval);
                $('#user-text').hide('fast', function() {
                    $('#user-text').html(textMsg);
                    $('#user-text').show('fast');
                });

            } else{

                $('#user-text').html("there is no text to display at the moment");
            }
        }

        // Set a delay for the current item to stay
        // Delay is key2 * 1000 seconds
        setTimeout(function(){
            printNext();
        }, results[cursor].text_duration * 1000);

        // Advance the cursor.
        cursor++;
    }

但不知何故它不起作用。发生的情况是每秒进行一次的内部循环受到整个函数设置的超时的干扰。 所以即使我们在这里找到匹配项 if (currentDate - dateOfText ==0) { - 它不会在整个持续时间内出现在屏幕上，因为它会被以下内容打断:

setTimeout(function(){
            printNext();
        }, results[cursor].text_duration * 1000);

我现在不知道如何继续，也不知道如何使逻辑工作，以便每个文本在其整个持续时间内播放。你能帮我吗？

Answer 1

因为 check 中有 else 条件来隐藏文本。我假设这些要显示的消息将提前到达，因此当消息准备好显示时，您将同时运行三个 check 实例.

由于 else 条件中的每一个都会每秒显示“没有文本可显示”消息，即使第一个 check 最终决定显示第一条消息，另外两个将很快占领它并说没有消息。

您也许可以将调用 printNext 的 setTimeout 移至 if 的 true 分支中的 check 函数内部.

我用另一种方法构建了一个小型演示:http://jsfiddle.net/nauzilus/rqctam5r/

它不会迭代 messages 数组，而是只关注第一个消息，完成后将其关闭。

您可以将新条目推送到消息中，它们将排队等待在适当的时候显示。

此外，这假设消息总是会提前加载；任何日期为过去的消息都将被处理，就好像它们现在就可以查看一样。

我没有使用过 jQuery，只是使用了普通的 JavaScript，但你应该能够轻松地适应它。 另外，我每 500 毫秒检查一次，并在消息在计划的 1000 毫秒内时显示，以避免由于浏览器延迟或阻塞而错过任何消息。计时器和时间表不能保证按照您预期的时间准确运行，因此如果时间花费 1001 毫秒而不是 1000 毫秒，您将错过一条消息!