asp.net - 如何在javascript中设置定时间隔?

标签 asp.net javascript jquery asp.net-mvc

下面的 JavaScript 应该设置一个时间间隔,以便 json 对象列表中的新项目将缓慢添加到列表顶部,但它们会同时添加。

<script type="text/javascript">
    var json;
    var count = 0;
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "/Home/PublicTimeLine",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                json = eval(msg);
                createRow();
            }

        });
    });

    function createRow() {
        if (count < json.length) {
            var data = json[count];
            var row = document.createElement("div");
            $(row).hide();
            row.appendChild(document.createTextNode(data.text));
            $(document).find("#results").prepend(row);
            $(row).fadeIn("slow");
            count++;
            setTimeout(createRow(), 3000);
        }
    }
</script>

<div id="results">
</div>

最佳答案

如果我是你,我会以稍微不同的方式解决这个问题。为什么不将所有数据添加到您的页面上,而只是将其隐藏并仅在需要时才显示。这样你就不必担心关闭之类的问题。

var intervalId;
$.ajax({
    type: "POST",
    url: "/Home/PublicTimeLine",
    dataType : "json",
    success : function (msg) {
        var json = eval(msg); // is this even needed?
        $.each(json, function(ind, data) {
            $("<div></div>")        // use jQuery to create the div
                .hide()
                .text(data)        // you can use jQuery to add contents too. (use .html() if you need HTML)
                .prependTo('#results')
            ;
        });
        intervalId = setInterval(showRow, 3000);
    }
});
function showRow() {
    var $myDiv = $('#results div:hidden:last');
    if ($myDiv.length) {
        $myDiv.show('slow');
    } else {
        clearInterval(intervalId);    // none more to show, stop checking
    }
}

关于asp.net - 如何在javascript中设置定时间隔?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/255617/

相关文章:

asp.net - ASP.NET 2.0 表单上的两个 UpdatePanel

html - 如何控制单选按钮列表控件的单选按钮之间的空间

jquery - firefox 自动完成 'enter' 自动完成按键触发文本框输入

javascript - 在 URL 中输入内容,提交后不刷新

javascript - 带进度条的倒数计时器

jquery - 图像叠加层 "margin-top"无法正确显示不同的图像高度

javascript - 使用 javascript 填写表单

javascript - 使用 JQuery 隐藏元素并激活按钮

jquery - 如何使用 jQuery 使 span 元素从图像后面滑出?

javascript - 在 HTML5/jQuery/css3 中将单词(出现和消失)动画化到毫秒