Wu_Naiandn1 2021-07-09 10:02 采纳率: 44.4%
浏览 505
已采纳

js中setInterval重新获取页面数据如何不让页面闪烁?

C#后台,软件 vs2019 前端layui做的轮播,js控制定时刷新页面数据
现在做出的效果,每隔一段时间重新获取页面数据,页面就会闪烁,我该如何取消这个闪烁呢或者让它闪快点不显眼呢?
求指导!
现在的效果:

img

js代码:

    ins=carousel.render({
        elem: '#test1'
        , width: '100%'
        , height: '800px'//设置容器宽度
        , arrow: 'none' //始终显示箭头
        , indicator: 'none'
        , interval:1000
        //,anim: 'updown' //切换动画方式
    });
    function timerefresh(time) {
        clearInterval(timer);
        var timer =setInterval(function () {
                getDataList();;//我是定时执行
        }, time);
    }
        //获取数据
    function getDataList(JsonData) {
        if (JsonData == "" || JsonData == null || JsonData == undefined) {
            JsonData = "{CODE_NUM:'" + "" + "'}"
        };
        var div = document.getElementById("lunbo");
        div.innerHTML = "";
        $.ajax({
            type: "post",
            url: "*****",
            contentType: "application/json",
            dataType: 'json',
            data: JsonData,
            async: true,
            success: function (msg) {
                if (msg.d != "" && msg.d != null) {
                    var len2 = eval(msg.d).length
                    if (eval(msg.d).length == 0) {
                        var str =
                            "<div class=\"furong33\">" +
                            "<p class=\"fontp33\">当前无出入库信息</p></br></div>"
                        $('.layui-carousel > [carousel-item] > *').css('background-color', 'aquamarine')
                        $('#sumnum').text("入库总数:0")
                        $('#lunbo').append(str)
                    }
                    if (len2 != len) {
                        timerefresh(eval(msg.d).length * 1000 + 1000);
                        len = eval(msg.d).length
                    }
                    $.each(eval(msg.d), function (i, n) {
                        if (V != "" && V != n.VIRTUALTRAYNO) {
                            YESHU++;
                        }
                        if (YESHU > eval(msg.d).length) {
                            YESHU = 1;
                        }
                        V = n.VIRTUALTRAYNO;
                        if (n.MATERIALNAME != "") {
                            var str =
                                "<div class=\"furong\"><div class=\"furongl\">" +
                                "<p class=\"fontpl\">物料:" + n.MATERIALNAME + "</p></br>" +
                                "<p class=\"fontpl\">箱数:" + n.XIANGSHU + "</p></br>" +
                                "<p class=\"fontpl\">总数:" + n.SHIDAO + "</p></br></div>" +
                                "<div class =\"furongr\"><p class=\"fontpr\">托盘号:" + n.VIRTUALTRAYNO + "</p></br>" +
                                "<p class=\"fontpr\" id=\"flagcolor\">缺失:" + n.QUEHUO + "</p></br>" +
                                "<p class=\"fontpr\">时间:" + n.CREATE_TIME + "</p></div></br>" +
                                "<div class=\"bottom\"><p class=\"bottoms\">总共托数:" + n.TUOSHU + ",当前第" + YESHU + "托</p></br>" +
                                "</div></div>"
                            $('#sumnum').text("入库总数:" + n.SUMNUM)
                            $('#lunbo').append(str)
                            if (n.QUEHUO != 0) {
                                $('.layui-carousel > [carousel-item] > *').css('background-color', 'red')
                                $(".title").css('background-color', 'red')
                                $(".titlee").css('background-color', 'red')
                            } else {
                                $('.layui-carousel > [carousel-item] > *').css('background-color', 'aquamarine')
                                $(".title").css('background-color', 'aquamarine')
                                $(".titlee").css('background-color', 'aquamarine')
                            }
                        } 
                    },
                    )
                } else {
                }
                ins.reload({
                    elem: '#test1',
                    width: '100%',//设置容器宽度
                    height: '800px',
                    arrow: 'none', //始终显示箭头
                    indicator: 'none',
                    //,anim: 'updown' //切换动画方式
                });
            },
            error: function () {
                layer.msg("网络异常,请求失败!");
            }
        });
    }


  • 写回答

1条回答 默认 最新

  • 略懂前端萌新 2021-07-09 10:24
    关注

    闪烁就是你在请求前吧内容清空了,空白时间就是你请求后渲染,你把清空的代码21 22 放在31 32会改善一点

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已采纳回答 7月9日
  • 修改了问题 7月9日
  • 修改了问题 7月9日
  • 创建了问题 7月9日

悬赏问题

  • ¥15 有偿求码,CNN+LSTM实现单通道脑电信号EEG的睡眠分期评估
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)
  • ¥20 matlab yalmip kkt 双层优化问题
  • ¥15 如何在3D高斯飞溅的渲染的场景中获得一个可控的旋转物体
  • ¥88 实在没有想法,需要个思路