setInterval和clearInterval javascript未按需要工作

我有以下代码部分工作。我是javascript新手，所以如果我的方法不是最好的，请不要责怪我

window.url_var = "status.htm";
window.elem = "#e1";

function menu_item(){
$(window.elem).click(function (event)
{ 
    $("#divTestArea1").load(window.url_var);
});
}

$("#e1").click(function (event)
{ 
event.preventDefault(); 
window.url_var = "demo2.txt";
window.elem = "#e1";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);  
});


$("#e2").click(function (event)
{ 
event.preventDefault(); 
window.url_var = "status.htm";
window.elem = "#e2";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);  
});

$("#e3").click(function (event)
{ 
event.preventDefault(); 
window.url_var = "form.htm";
window.elem = "#e3";
clearInterval(auto_refresh);
$("#divTestArea1").load(window.url_var);
});


jQuery(document).ready(function() {
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);  
});

每当我单击元素e1和e2时，setInterval都会按预期工作，并且只要我单击元素e3，元素就停止重新加载

到目前为止，这就是我想要的行为。但是如果再次单击e1或e2 get，我还想再次启动setinterval

最后一个问题是上面的代码不起作用

如果你能给我指出正确的方向，我将不胜感激

---

在看到我最初问题的一些答案后，我来到了这段代码（感谢大家）。为了阐明我最初的想法，我需要定期更新网页上的一些项目，但内容可以通过一些菜单进行更改，而且一些内容（如表单）不应更新

window.url_var = "demo2.txt";
var     auto_refresh = null;

function setRefresh() {
    var self = this;
    this.bar = function() {
      if(window.url_var != ""){ 
    $("#divTestArea1").load(window.url_var);
            auto_refresh = setTimeout(function() { self.bar(); }, 5000);
        }
    }
    this.bar();
}

$("#e1").click(function (event)
{ 
    event.preventDefault(); 
    window.url_var = "demo2.txt";
    setRefresh();
});  


$("#e2").click(function (event)
{ 
    event.preventDefault(); 
    window.url_var = "status.htm";
    setRefresh();
});  

$("#e3").click(function (event)
{ 
    event.preventDefault(); 
    window.url_var = "form.htm";
    $("#divTestArea1").load(window.url_var);
    window.url_var = "";
});


$(document).ready(function() {
    setRefresh();
});

---

尝试使用两个不同的变量，并在需要时清除所有变量。这是：自动刷新1和自动刷新2。每次调用setinterval时，它都会创建一个具有新id的新计时器。您正在覆盖auto_refresh变量，在此之前的计时器仍将启动

---

或者，您可以将setinterval存储在一个散列对象中，然后运行并清除它们。

我不清楚您在这里到底想做什么。尽管如此，我还是重写了您的代码以进行一些改进（并修复了代码中涉及

setInterval

调用的一个明显错误）

我猜那些

setInterval

调用实际上应该是

setTimeout

调用？为什么要一次又一次地绑定“click”事件处理程序

---

EDIT#1:从

bind

方法切换到jQuery当前首选的

on

方法，包括使用事件数据参数进一步抽象事件处理代码。

删除setInterval（菜单项（），5000）；并添加设置间隔（菜单项，5000）；对于所有的setInterval/setTimeOut，仅仅因为我是javascript新手，这可能就是答案。在您的响应之后，我意识到我正在一次又一次地将单击绑定到事件处理程序。谢谢你所做的一切。

var url_var = "status.htm",
    elem = "#e1",
    $destination = $("#divTestArea1"),
    auto_refresh;

function menu_item() {
    $(elem).bind("click", function (e) {
        $destination.load(url_var);
    });
}

function load() {
    $destination.load(url_var);
}

function set(url, id) {
    url_var = url;
    elem = id;
}

function setRefresh() {
    return setInterval(menu_item, 5000);
}

function handleClick(e) {
    e.preventDefault();
    set(e.data.url, e.data.id);
    load();
    auto_refresh = setRefresh();
}

$("#e1").on("click", {
    url: "demo2.txt",
    id: "#e1"
}, handleClick);

$("#e2").on("click", {
    url: "status.htm",
    id: "#e2"
}, handleClick);

$("#e3").on("click", function (e) {
    e.preventDefault();
    set("form.htm", "#e3");
    clearInterval(auto_refresh);
    load();
});

$(document).ready(function () {
    load();
    auto_refresh = setRefresh();
});