setInterval和clearInterval JavaScript不按需要工作

Question

我有以下代码部分工作。我是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再次点击，我也想再次启动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(); 
}); 

Answer 1

尝试使用2个不同的变量并在需要时清除所有变量。这是：auto_refresh1和auto_refresh2。每次调用setinterval时，都会创建一个带有新ID的新计时器。您正在覆盖auto_refresh变量，并且之前的计时器仍会触发。

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

Answer 2

我不清楚你到底想要做什么。尽管如此，我已经重写了一些代码来做一些改进（并修复了代码中涉及setInterval调用的一个明显错误）。

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(); 
}); 

我猜测，也许那些setInterval呼叫实际上应该是setTimeout电话？你为什么要重复绑定一个“点击”事件处理程序？

EDIT＃1：切换到jQuery的当前优选on方法从bind方法，包括使用事件数据参数的进一步抽象事件处理代码。