javascript - 如何防止缓存导致的Javascript代码多次运行

Question

我有一个 Asp.net-MVC，当我发送请求时它返回一个 partial-view。

public ActionResult AccountDetails()
{
    return PartialView("~/Views/partials/Account/Details.cshtml");
}

然后我使用下面的代码在我的表单中加载部分内容。

var condition = true;
var pageNumber = 0;
for (var i = 1; i < 10; i++) {
    $("#page_view" + i).addClass("d-none");
    if (condition && $("#page_view" + i).html().trim() == "") {
        pageNumber = i;
        condition = false;
    }
}
$("#page_view" + pageNumber).removeClass("d-none");

$.ajax({
    url: url,
    type: "GET",
    async: true,

    success: function (result) {
        $("#page_view" + pageNumber).html(result);
    }
});

在我的主 html 文件中，我只使用一个链接来获取页面并加载它:

<a href="javascript: load_main_form('Account/Details');">DetailsPage</a>

在这种方法中，问题是当我多次加载和关闭一个页面时，该页面的 Javascript 在每次加载时都存储在缓存中，并且某些函数或事件在每次加载时都会运行多次。

我使用 ajaxComplete 来获取它在缓存中存储了多少次。

如何清除缓存或重写上一个缓存？或者即使有更快的方法来做到这一点，我也会感谢您的分享。

Answer 1

我将逐步解决您的问题

1。 “缓存导致的Javascript代码多次运行”

缓存不会导致代码多次运行。缓存只影响代码的加载方式。如果您尝试多次加载一个 js，缓存只会影响浏览器查找该文件的位置，网络(如果未缓存)或本地缓存。您的浏览器永远不会仅仅因为在缓存中就运行任何代码，它会运行是因为您要求它执行(有意或无意)

很可能有 javascript 代码旨在在您正在加载的其中一个 View 中运行一次。因此，如果您有打算运行一次的代码，则必须将其放置在加载其余 View (通常称为布局或基础)的文件中

任何 View 中出现的任何 javascript 都必须特定于该 View 。因此，为了对其进行调试，转到任何导致问题的 View 并查看是否存在 javascript，如果存在，则搜索原点(可能来自布局，可能是该局部 View 内的另一个局部 View ，或某处)

看下图就明白我的意思了

现在终于

2。 “如何防止 Javascript 代码多次运行”

是的，你可以防止代码多次运行，我会解释如何，但我建议你首先修复你的项目的结构，并且只在结构不能改变的情况下使用它，否则就像涂上油漆一样裂缝的顶部

假设您有一些代码:

let myCounter = 0;
myCounter ++;
console.log(`Hey! I've run ${myCounter} times`);

然后在部分 View 中，更改代码并将其包装在一个函数中，并附上一条检查该函数是否已经运行的语句(给它一个名称，假设为初始化器，然后...)

!window.initializator && (initializator = true) && (function() {
    let myCounter = 0;
    myCounter++;
    console.log(`Hey! I've run ${myCounter} times`);
})()

现在，无论浏览器执行多少次这段代码，它都不会多次运行里面的指令，因为它在全局范围内留下了一个变量，确保如果代码再次执行，代码将被跳过。

你也可以使用另一个对象而不是窗口(我强烈推荐，因为如果可以避免的话，你绝不能使用全局变量)但是我这样放这个例子是因为如果你不能控制流程你的代码，你不能确保有一个对象之前实例化。