时间戳

首页 > 解决方案 > 网页打开几分钟后变慢并刷新排序

javascript - 网页打开几分钟后变慢并刷新排序

问题描述

我目前正在从事一个在 ASP.Net MVC 中构建的项目，该项目将在屏幕上显示数据，并且每次单击其中一个标签时，它都应该改变颜色。该项目旨在同时在多个屏幕上显示，并且两个屏幕都可以使用它。问题是，在运行几分钟后，其中一个屏幕将开始变得异常缓慢，并且在硬刷新后它会恢复正常但不会持续很长时间。我曾尝试同时使用对数据库和实体框架模型的直接调用，但到目前为止没有运气...... Chrome 的开发控制台显示了这一点，我不知道这是否有帮助......

图片


        function refreshCheckTimers() {
            $(".check-timer").each(function () {

                //Longest timer overall
                var dish_id = $(this).attr("data-longestDish");

                var mainbody = $(this).closest(".check-footer").siblings(".check-mainbody");
                var prepTime = parseInt($(mainbody).find("[data-uniqueID=" + dish_id + "]").attr("data-prepTime")); //in seconds
                var dish_status = parseInt($(mainbody).find("[data-uniqueID=" + dish_id + "]").attr("data-status"));
                var activeCourse = $(mainbody).find("[data-uniqueID=" + dish_id + "]").attr("data-course");
                if (activeCourse == "mains" || activeCourse == "sides") {
                    activeCourse = "MCSI";
                }

                var anyDishCooking = false;
                if (activeCourse == "starters") {
                    anyDishCooking = $(mainbody).find(".dish-details:not(.summary)[data-course=starters][data-status=" + CheckStatus.get("COOKING") + "]").length;
                } else if (activeCourse == "MCSI") {
                    anyDishCooking = $(mainbody).find(".dish-details:not(.summary, [data-course=starters], [data-course=pastry])[data-status=" + CheckStatus.get("COOKING") + "]").length;
                } else if (activeCourse == "pastry") {
                    anyDishCooking = $(mainbody).find(".dish-details:not(.summary)[data-course=pastry][data-status=" + CheckStatus.get("COOKING") + "]").length;
                }


                var cookingStartTimeString = $(mainbody).find("[data-uniqueID=" + dish_id + "]").attr("data-cookingStartTime");
                var cookingStartTime = new Date(cookingStartTimeString);
                var endTime = new Date(cookingStartTime.getTime());
                endTime = new Date(endTime.getTime() + 1000 * prepTime);
                var currentTime = new Date();

                var diff = endTime.getTime() - currentTime.getTime();

        function DisplayCheck() {
           
            var TableNumber = $(".table-entry").val();
            var checkDate = new Date().toISOString();
            
            $.ajax({
                type: "POST",
                cache: false,
                url: '@Url.Action("DisplayCheckForTable", "KitchenScreens")',
                contentType: "application/json;",
                data: JSON.stringify({ TableNumber: TableNumber }),
                success: function (result) {
                    for (const c in result.lstChecks) {
                        placeCheck(result.lstChecks[c]);
                    }

                    
                },
                complete: function () {
                    setTimeout(DisplayCheck, 1000);
                },
                error: function (xhr, status, error) {
                    console.warn(xhr.responseText);
                }
            });
        }

地点检查

        // Contains all operations performed on check for display
        function placeCheck(check) {

            var checkElement = jQuery.parseHTML(check);
            
            checkElement = styleCheck(checkElement);    //give check appropriate borders and dish colors

            var currCheckID = $(check).attr("id");

            var checkContent = $(checkElement[1]).html();

            //also need to update expanded if its open
            var modalOpen = $("body [data-check-id='" + currCheckID + "']").length;
            
            populateExpandedCheck(checkContent, currCheckID);    //refresh expanded check
            // Set scroll position of check mainbody for expanded check
            var expandedScrollPos = $("body [data-check-id='" + currCheckID + "']").attr("scrollPos");
            expandedScrollPos = (typeof expandedScrollPos === 'undefined') ? 0 : expandedScrollPos;
            $("body [data-check-id='" + currCheckID + "']").find(".check-mainbody").scrollTop(expandedScrollPos);
            

            
        }

提前谢谢你快乐编码！

标签： javascriptc#asp.net-mvc

解决方案

我建议如下：

  • 在您的 ajax 调用中使用同步。设置async: false属性。
  • 在 ajax 完成事件上增加了再次调用的延迟DisplayCheck。我不确定 1 秒是否足以从服务器获取数据并在下一次触发发生之前对其进行处理。可能在您的本地机器上感觉不到差异，但在生产服务器上。设置为 2000 毫秒？
  • 从示例代码中仍然不清楚refreshCheckTimers调用的位置和时间，但尝试限制对refreshCheckTimers函数的调用。
  • 我建议不要在每次有新数据时解析页面 html，而是维护一个 javascript 对象列表，您可以从中刷新 UI。即更新 ajax 调用中的数据，然后从列表中渲染 UI，忽略之前渲染的内容。

推荐阅读