Question

我想使用JSON文件中的内容更新HTML容器。但我希望能够动态地执行此操作并更改显示时间间隔，而无需通过手动设置jsonobj["PD1_ta"], jsonobj["PD2_ta"], jsonobj["PD3_ta"]的值来刷新页面（它们是我的计时器值）。

简而言之：我想为每张幻灯片和动态更新内容制作一个动态HTML幻灯片循环，其中包含不同的自定义显示时间。

我尝试了许多解决方案，例如：

在主setInterval内同步写json调用功能
在main中异步写入json调用 setInterval功能
在一个单独的同步中写入json调用 setInterval功能
在a中异步编写json调用单独的setInterval功能

但它们都不起作用。

var jsonobj= {};
jsonobj["PD1_ta"] = {{PD_data["PD1_ta"]}};
jsonobj["PD2_ta"] = {{PD_data["PD2_ta"]}};
jsonobj["PD3_ta"] = {{PD_data["PD3_ta"]}};    
jsonobj["PD1_titre"] = "{{PD_data["PD1_titre"]}}";
jsonobj["PD2_titre"] = "{{PD_data["PD2_titre"]}}";
jsonobj["PD3_titre"] = "{{PD_data["PD3_titre"]}}";

setInterval(
    function() {
        // Set the global configs to synchronous 
        $.ajaxSetup({
            async: false
        });

        $.getJSON('/getallitems.json', function(data) {   
            jsonobj = data;
        });

        // Set the global configs back to asynchronous 
        $.ajaxSetup({
            async: true
        });

        setTimeout(
        function(){
            var output = "";
            output += '<p>';
            output += '<a style="color: yellow;">'+ jsonobj["PD1_titre"]+'</a>';
            output += '</p>';
            document.getElementById("fieldstobeupdated").innerHTML = output;
        },0);

        setTimeout(
        function(){
            var output = "";
            output += '<p>';
            output += '<a style="color: yellow;">'+ jsonobj["PD2_titre"]+'</a>';
            output += '</p>';
            document.getElementById("fieldstobeupdated").innerHTML = output;
        },jsonobj["PD1_ta"]);

        setTimeout(
        function(){
            var output = "";
            output += '<p>';
            output += '<a style="color: yellow;">'+ jsonobj["PD3_titre"]+'</a>';
            output += '</p>';
            document.getElementById("fieldstobeupdated").innerHTML = output;
        },jsonobj["PD1_ta"]+jsonobj["PD2_ta"]);

    },jsonobj["PD1_ta"]+jsonobj["PD2_ta"]+jsonobj["PD3_ta"]);

也许有另一种方式？可能吗？谢谢你的帮助！

Answer 1

如果您需要不同的时间，请不要使用setInterval代替setTimeout：

function loop() {

    // Set the global configs to synchronous 
    $.ajaxSetup({
        async: false
    });

    $.getJSON('/getallitems.json', function(data) {   
        jsonobj = data;
    });

    // Set the global configs back to asynchronous 
    $.ajaxSetup({
        async: true
    });

    setTimeout(
    function(){
        var output = "";
        output += '<p>';
        output += '<a style="color: yellow;">'+ jsonobj["PD1_titre"]+'</a>';
        output += '</p>';
        document.getElementById("fieldstobeupdated").innerHTML = output;
    },0);

    setTimeout(
    function(){
        var output = "";
        output += '<p>';
        output += '<a style="color: yellow;">'+ jsonobj["PD2_titre"]+'</a>';
        output += '</p>';
        document.getElementById("fieldstobeupdated").innerHTML = output;
    },jsonobj["PD1_ta"]);

    setTimeout(
    function(){
        var output = "";
        output += '<p>';
        output += '<a style="color: yellow;">'+ jsonobj["PD3_titre"]+'</a>';
        output += '</p>';
        document.getElementById("fieldstobeupdated").innerHTML = output;
    },jsonobj["PD1_ta"]+jsonobj["PD2_ta"]);

    setTimeout(loop, jsonobj["PD1_ta"]+jsonobj["PD2_ta"]+jsonobj["PD3_ta"]);
}
setTimeout(loop, jsonobj["PD1_ta"]+jsonobj["PD2_ta"]+jsonobj["PD3_ta"]);

JavaScript中的幻灯片显示，动态显示时间和内容

1 个答案: