Question

我正在制作一个需要缓慢上下滚动的警报板-每两分钟使用Ajax获取更多数据（为此我已经有了一个名为getData（）的函数）

到目前为止，我已经得到：

$(document).ready(function () {
            getData();

            $("html, body").animate({ scrollTop: $(document).height() }, 20000);
            setTimeout(function () {
                $('html, body').animate({ scrollTop: 0 }, 20000);
            }, 10);
            var scrolltopbottom = setInterval(function () {

                $("html, body").animate({ scrollTop: $(document).height() }, 20000);
                setTimeout(function () {
                    $('html, body').animate({ scrollTop: 0 }, 20000);
                }, 100);

            }, 2000);
            getData();

        });

但是，这只会滚动页面，而无法调用getData（）

理想情况下，我想自动上下滚动页面，以便人们可以读取页面，而不管页面上有多少数据，每2分钟调用getData（）刷新一次数据。

该页面包含一个简单的表，该表可能具有x的行数-该行数将随着调用getData（）而改变。

getData（）代码

function getData() {
                $.ajax({
                    url: #url#,
                    type: "GET",
                    success: function (data) {

                        $("#alarms tr").remove(); 


                        $.each(data, function (i, item) {
                                    $("#alarms").prepend("<tr class=\"bg-danger\"><td>" + item.name + "</td></tr>");
                                }
                        });
                        $("#refreshed").text(new Date().toLocaleString());
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        $('body').html('<span style="color: red;"><h2>Error retrieving data<!/h1><br/><h3>' + thrownError + '</h3></span>');
                    }
                });

html页面只有一个带有thead和tbody的表

Answer 1

尝试此代码可能会对您有所帮助。

$(document).ready(function () {
            getData();

            $("html, body").animate({ scrollTop: $(document).height() }, 20000);
            setTimeout(function () {
                $('html, body').animate({ scrollTop: 0 }, 20000);
            }, 10);
            var scrolltopbottom = setInterval(function () {

                $("html, body").animate({ scrollTop: $(document).height() }, 20000);
                setTimeout(function () {
                    $('html, body').animate({ scrollTop: 0 }, 20000);
                }, 100);
                getData();
            }, 2000);


        });

谢谢

Javascript自动上下滚动页面并定期刷新数据

1 个答案: