Các sự cố với nhiều lần cài đặt chạy đồng thời

Question

Bài đăng đầu tiên của tôi tại đây. Tôi muốn thực hiện một menu ngang với menu con trượt xuống trên di chuột qua. Tôi biết tôi có thể sử dụng jQuery nhưng điều này là để thực hành kỹ năng javascript của tôi.

tôi sử dụng đoạn mã sau:

var up = new Array() 
var down = new Array() 
var submenustart 

function titleover(headmenu, inter) 
{ 
submenu = headmenu.lastChild 

up[inter] = window.clearInterval(up[inter]) 
down[inter] = window.setInterval("slidedown(submenu)",1) 
} 

function slidedown(submenu) 
{ 
if(submenu.offsetTop < submenustart) 
{ 
    submenu.style.top = submenu.offsetTop + 1 + "px" 
} 
} 

function titleout(headmenu, inter) 
{ 
submenu = headmenu.lastChild 

down[inter] = window.clearInterval(down[inter]) 
up[inter] = window.setInterval("slideup(submenu)", 1) 

} 

function slideup(submenu) 
{ 
if(submenu.offsetTop > submenustart - submenu.clientHeight + 1) 
{ 
    submenu.style.top = submenu.offsetTop - 1 + "px" 
} 
} 

Các submenustart biến được bổ nhiệm một giá trị trong một chức năng mà không phải là thích hợp cho câu hỏi của tôi.
HTML trông như thế này:

<table class="hoofding" id="hoofding"> 
<tr> 
    <td onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)"><a href="#" class="hoofdinglink" id="hoofd1">AAAA</a> 

    <table class="menu"> 
    <tr><td><a href="...">1111</a></td></tr> 
    <tr><td><a href="...">2222</a></td></tr> 
    <tr><td><a href="...">3333</a></td></tr> 
    </table></td> 

    <td onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)"><a href="#" class="hoofdinglink">BBBB</a> 

    <table class="menu"> 
    <tr><td><a href="...">1111</a></td></tr> 
    <tr><td><a href="...">2222</a></td></tr> 
    <tr><td><a href="...">3333</a></td></tr> 
    <tr><td><a href="...">4444</a></td></tr> 
    <tr><td><a href="...">5555</a></td></tr> 
    </table></td> 
     ... 
</tr> 
</table> 

gì sẽ xảy ra như sau:
Nếu tôi đi qua và ra (cho ex) menu dành cho nó hoạt động tốt. Nếu bây giờ tôi đi qua menu B, khoảng thời gian áp dụng cho A hiện được áp dụng cho B. Hiện tại có 2 hàm được áp dụng cho B. Một hàm ban đầu cho A và một hàm mới được kích hoạt bằng cách di chuột qua B. Nếu tôi đi cho A tất cả các khoảng thời gian hiện được áp dụng cho A.

Tôi đã tìm kiếm hàng giờ nhưng tôi hoàn toàn bị kẹt.

Xin cảm ơn trước.

Answer 1

đề nghị đầu tiên của tôi là để

1. Thực hành sử dụng dấu chấm phẩy đúng cách và không dựa vào chèn dấu chấm phẩy
2. Không vượt qua chức năng như dây đàn (mà đòi hỏi phải có một tiềm ẩn eval)
3. use JavaScript to attach events in a non-obtrusive manner

.

var up = [], 
    down = [], 
    submenustart; 

function titleover(headmenu, inter) { 
    up[inter] = window.clearInterval(up[inter]); 
    down[inter] = window.setInterval(function() { slidedown(headmenu.lastChild); }, 1); 
} 

function slidedown(submenu) { 
    if (submenu.offsetTop < submenustart ) { 
     submenu.style.top = submenu.offsetTop + 1 + "px"; 
    } 
} 

function titleout(headmenu, inter) { 
    down[inter] = window.clearInterval(down[inter]); 
    up[inter] = window.setInterval(function() { slideup(headmenu.lastChild); }, 1); 
} 

function slideup(submenu) { 
    if (submenu.offsetTop > submenustart - submenu.clientHeight + 1) { 
     submenu.style.top = submenu.offsetTop - 1 + "px"; 
    } 
} 

Đề xuất thứ hai của tôi là không sử dụng bảng cho các menu vì chúng không phải là dữ liệu dạng bảng. Thay vào đó, hãy sử dụng danh sách chưa được phân loại.

<ul class="hoofding" id="hoofding"> 
    <li onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)"> 
     <a href="#" class="hoofdinglink" id="hoofd1">AAAA</a> 
     <ul class="menu"> 
      <li><a href="...">1111</a></li> 
      <li><a href="...">2222</a></li> 
      <li><a href="...">3333</a></li> 
     </ul> 
    </li> 
    <li onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)"> 
     <a href="#" class="hoofdinglink">BBBB</a> 
     <ul class="menu"> 
      <li><a href="...">1111</a></li> 
      <li><a href="...">2222</a></li> 
      <li><a href="...">3333</a></li> 
     </ul> 
    </li> 
</ul> 

Answer 2

AFAIK, (và theo tham chiếu Gecko DOM) window.clearInterval() không trả lại bất kỳ thứ gì, có thể là lý do khiến mọi thứ rối tung lên.