究竟何时清空JQM DOM缓存? [英] When exactly is JQM DOM cache emptied?
问题描述
我一直在用包含多个绑定的JQM刷新< div> 元素.每次刷新后，我发现Chrome中的侦听器有所增加.在某些时候，页面不再响应.
根据文档， html()替换(即调用了 empty())该< div> 的所有相关元素((包括绑定))，但是这意味着侦听器不会增加.即使使用 remove()删除< div> 元素并重新创建，侦听器的数量也不会减少.这与DOM缓存有关吗?也许没有被清空?我只有一个页面，据我了解，第一页总是被缓存.
我在这里监督什么?
我的主文档的简化版:
<！DOCTYPE html>< html>< head><元字符集="utf-8"；/>< link rel ="stylesheet"href ="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>< script src =" jquery.mobile-1.4.5/jquery-2.1.0.js"</script>< script src ="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"</script< script>$(document).on("pagecreate"，function(event){var interval;setRefreshTime();函数setRefreshTime(){interval = setTimeout(function(){refresh();}，10000);}函数refresh(){clearTimeout(interval);$ .ajax({类型:"GET"，网址:"content.php"，成功:功能(数据){$(#content").html(data);$(#content").enhanceWithin();setRefreshTime();}});}$(#page").on("click"，.function_A"，function(){刷新();});$(#page").on("click"，.function_B"，function(){刷新();});});</script></head>< body>< div data-role =页面"id ="page">< div role ="main"；class ="ui-content"< div id ="content"><?php include("content.php");?</div</div></div></body></html> content.php 会被加载:
< ul data-role ="listview"data-inset ="true"data-divider-theme ＝"a".< li data-role =列表分隔符""标题A< li< li data-role =列表分隔符">标题B< li>< div class ="ui-grid-a">< div class ="ui-block-a">< a href =#"class ="ui-shadow ui-btn ui-corner-all function_A">按钮A</a>/div< div class ="ui-block-b""< a href =#"class ＝"ui-shadow ui-btn ui-corner-all function_B".>按钮B</a>/div</div></ul> 感谢您到目前为止的评论.我考虑了所有因素(我基本上将(content)替换为page-；重新运行性能监视时，看不到重复的绑定，但是听众仍然增加.请在下面的屏幕截图中找到:
是不是实际上与JQM不相关，而是一个ajax的问题"?
在少数情况下，侦听器的数量突然减少:
我该如何招惹后者?
来自
因此，我坚信这不是JQM页面缓存问题.每个 widget 都有自己的实现和行为.如果您仅使用一个页面并动态更新内容，这很好，但是-根据您要在页面内容内部添加的窗口小部件，您可能需要应用自定义清理，或者可能需要替换该窗口小部件内容更简单:例如，带有单选按钮的 controlgroup 可以很好地替代 navbar 按钮.无需额外的未知功能，也无需进行特殊清理.
I am constantly refreshing a <div> element with JQM which contains several bindings. After every refresh, I see an increase of listeners in Chrome. At some point, the page is not responsive anymore.
According to the documentation, html() replaces (i.e. invoked empty()) all related elements of that <div> (including bindings) before inserting new content, however, that would mean that the listeners do not increase. Even when I delete the <div> element using remove() and recreate, the numbers of listeners do not decrease. Is that somehow related to the DOM cache, which is not being emptied maybe? I only have a single page, and as I have learned, the first page is always cached.
What am I overseeing here?
Simplified version of my main document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="jquery.mobile-1.4.5/jquery-2.1.0.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate", function( event ) {
var interval;
setRefreshTime();
function setRefreshTime() {
interval = setTimeout(function () { refresh(); }, 10000);
}
function refresh() {
clearTimeout(interval);
$.ajax({
type: "GET",
url: "content.php",
success: function(data) {
$("#content").html(data);
$("#content").enhanceWithin();
setRefreshTime();
}
});
}
$("#page").on("click", ".function_A", function(){
refresh();
});
$("#page").on("click", ".function_B", function(){
refresh();
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div role="main" class="ui-content">
<div id="content"><?php include("content.php");?></div>
</div>
</div>
</body>
</html>
content.php which gets loaded:
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Title A</li>
<li data-role="list-divider">Title B</li>
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" class="ui-shadow ui-btn ui-corner-all function_A" >Button A</a></div>
<div class="ui-block-b"><a href="#" class="ui-shadow ui-btn ui-corner-all function_B" >Button B</a></div>
</div>
</ul>
EDIT: Thanks for the comments so far. I took everything into account (I basically replaced the (content) to be replaced with the page-; When re-running the performance monitoring, I do not see the duplicate bindings, but still an increase in listeners. Please find the screenshot below:
Could it be that it is actually not JQM related but an ajax "issue"?
In rar cases, there is a sudden drop in the number of listeners:
How can I provoke the latter?
From the jQuery Mobile Documentation:
Within the "
page" [...] the immediate children of a "page" are divs with data-role="header", class="ui-content", and data-role="footer".
In Your project, You are dynamically updating the content, which is one level below the page. You need to check what kind of widget You are dynamically append to the content, because some widgets needs to attach event listeners to an upper level - the page - to provide some functionalities, like - for instance - the header and footer for the tap-toggle, or the navbar for the active state button, or moreover, the panel widget for swipe, and so on.
Are You able to identify inside the Developer Tools the duplicated event listeners?
The navbar example:
Lets take for example the navbar: the JQM team intended this widget to be attached one time to a page to provide navigation among pages. If You are dynamically append a navbar it is not enough to clean-up the parent markup (which is also correctly detaching the direct attached event listeners) but You need also to clean-up the event listeners attached to the page during the widget creation.
Why the navbar widget doesn't remove all created event listeners?
I am not the right person to judge if this is a bug or a missing feature, Everything can be implemented in a better way. As said, the navbar is meant to be inserted just one time inside a page to provide navigation among pages.
Is there a fix for the dynamic navbar?
For the event listeners issue, You may need to monkey-patch JQM like this:
<script src="js/jquery-2.2.4.js"></script>
<script>
$(document).on("mobileinit", function () {
$.widget("mobile.navbar", $.mobile.navbar, {
_destroy: function() {
var $navbar = this.element;
$navbar.closest(".ui-page").off("pagebeforeshow");
}
});
});
</script>
<script src="js/jquery.mobile-1.4.5.js"></script>
The result:
Left: the page event listeners despite the content.empty() or content.html("") invocations.
Right: the page event listeners with the hotfix applied.
So, I strongly believe this is not a JQM Page cache issue. Every widget has its own implementation and behavior. If You are using just only one page and dynamically updating the content, this is fine, but - depending from which widget You are appending inside the page content - You may need to apply a custom clean-up or You may need to replace the widget with something simpler: for instance, a good replacement for the navbar buttons is a controlgroup with radio-buttons. No extra unknown functionalities and no need to special clean-up.
这篇关于究竟何时清空JQM DOM缓存?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
