jq实现每隔7秒种展示动态消息，类似于拼夕夕

原创于 2021-03-06 14:53:02 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

H5自适应网站专栏收录该内容

4 篇文章

订阅专栏

该段代码展示了如何使用jQuery从后台获取数据并动态显示。首先通过$.get方法调用'data/getdynamic'接口，获取数据并解析为JSON。数据存储在数组arr中，然后通过showNext函数每7秒展示一条数据，内容包括用户头像、昵称、操作时间和信息。当所有数据展示完后，会重新调用checkAction函数获取新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

//需要调用后台接口，后台接口返回的是一个数组
    $(function () {
            var showindex = 0;
            var arr = [];
            function checkAction() {
                $('#box').html('');
                $.get('data/getdynamic', {}, function (r) {
                    var res = JSON.parse(r)
                    // 当前数组
                    arr = res.data
                    showindex = 0;
                    showNext();
                    return;
                })
            }

            function showNext() {
                if (arr.length <= showindex) {
                    checkAction();
                    return;
                }
                var item = arr[showindex];
                str = `<div class="msgRamind"><img class="msgRemind_avater" src="${item.avatar}" alt="">
                                <span>${item.nickname}${item.add_time}${item.dowork}</span>
                                <img class="arrow" src="http://imgshisiwu.swmob.com/images/arrow.png" alt=""></div>`
                $("#box").html(str).fadeIn(300);
                setTimeout(() => {
                    $("#box").fadeOut(300);
                }, 3000);
                showindex++;
            }

            setInterval(() => {
                showNext();
            }, 7000);

            setTimeout(() => {
                checkAction();
            }, 2000);
        })```