Question

假设原始单页应用程序具有以下结构：

<nav>
  <a href="/static">static</a>
  <a href="/ajax">ajax</a>
</nav>

<h1 id="title"></h1>
<div id="content"></div>

点击第一个链接可快速设置一些静态内容：

$('#title').html('static title');
$('#content').html('static content');

点击第二个链接从服务器获取一些内容，完成后，使用它来设置页面上的内容：

$('#title').html('ajax title');
$.get(
    url,
    data,
    function success(data) {
        $('#content').html(data);
    }
);

单击ajax链接，然后快速（在ajax返回之前）到static链接是有问题的，因为当ajax返回它时，即使用户有＆＃，也会替换内容34;切换＆＃34;到静态页面，所以我得到一个不一致的应用程序状态，其中一个页面的标题和另一个页面的内容：

<h1>static title</h1>
<div>dynamic content from ajax</div>

解决这个问题的最佳方法是什么？

我想到了：

使用全局（或应用程序作用域）变量，我将跟踪哪个页面当前可见，因此当ajax响应返回时，我应该在屏幕上写入内容之前检查该变量。
有一个ajax队列或其他东西，每当我切换页面时，都会对所有可能的待处理ajax响应进行中止。
不为所有网页共享相同的div#content。每个页面都有自己的内容，切换页面也涉及显示/隐藏div。

有更好的方法吗？

Answer 1

如果您使用$('#content').load()代替$.get()，那么元素#content将在通话时而不是在完成时解析，因此如果原始#content被替换为新元素它将是接收内容的旧元素，而不是当前在DOM中持有该ID的那个元素。

$('#link1').on('click', function() {
    $('#content').replaceWith('<div id="content">');
    // add static contents
});

$('#link2').on('click', function() {
    $('#content').replaceWith('<div id="content">Loading...</div>')
                 .load(url, data);
});

或者，只需在调用$.get()之前检索对$('#content')的引用并在回调中使用该引用，就可以使用$.get()获得相同的效果。

防止更新div的迟到ajax响应

1 个答案: