一些多么简单的脚本。可以看到出了什么问题

Question

这是包含脚本的页面的链接。 http://signsourceak.com/index1.html

这是我的脚本，由于某些原因所有函数都会触发无需鼠标悬停。谁能告诉我我的脚本有什么问题

window.onload = sliding;
var tags = new Array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// List of headings
var pics = new Array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images that slide out

function sliding(){ // assing event 
    for(var i=0; i< tags.length; i++){
        document.getElementById(tags[i]).onmouseover = slideout(tags[i],pics[i]); // <-- The Problem is Here Function runs with out the actual event
        document.getElementById(tags[i]).onmouseout = slidein(tags[i],pics[i]);
    //alert('this worked,'+ tags[i] + pics[i]);
    }
}

function slideout(hid,picid){
    document.images[picid].style.visibility = "visible";
    document.images[picid].style.MozOpacity = 0.7;// need browser compatability
    moveout(hid,picid);
}

function moveout(hid,picid){
    if(currpos(picid) > 0){
        document.images[picid].style.top = currpos(picid) - 1 + "px";
        setTimeout(moveout,10);
    }else{
        clearTimeout(moveout);
    }

    function currpos(element){
        return document.getElementById(element).offsetTop;
    }
}

function slidein(hid,picid){
    document.images[picid].style.MozOpacity = 0.5;// need browser compatability
    movein(hid,picid);
}

function movein(hid,picid){
    if(currpos(picid) < 210){
        document.images[picid].style.top = currpos(picid) + 1 + "px";
        setTimeout(movein,10);
    }else{
        clearTimeout(movein);
        document.images[picid].style.visibility = "hidden";
    }

    function currpos(element){
        return document.getElementById(element).offsetTop;
    }
}

Answer 1

这不是如何使用clearTimeOut。

setTimeout 返回一个必须传递给clearTimeOut 的计时器ID：

var timer = setTimeout( fn, 10 );
clearTimeout( timer);

Answer 2

您将slideout() 和slidein() 的结果分配为处理程序。您还需要隔离闭包变量；自调用函数将确保 i 循环变量不被所有事件处理程序共享

function sliding(){ // assing event 
    for(var i=0; i< tags.length; i++){

        document.getElementById(tags[i]).onmouseover =(function(index){
            return function() {
               slideout(tags[index],pics[index]);
            }
        })(i); 

        document.getElementById(tags[i]).onmouseout = (function(index){
            return function() {
                slidein(tags[index],pics[index]);
            }
        })(i);
    }
}

Answer 3

这里有一个问题：

function sliding(){ // assing event 
    for(var i=0; i< tags.length; i++){
        document.getElementById(tags[i]).onmouseover = slideout(tags[i],pics[i]); // <-- The Problem is Here Function runs with out the actual event
        document.getElementById(tags[i]).onmouseout = slidein(tags[i],pics[i]);
    //alert('this worked,'+ tags[i] + pics[i]);
    }
}

在该循环中，您调用“slideout”和“slidein”函数，尽管很明显这不是您想要做的。您想要是分配一个以适当方式调用“slideout”或“slidein”的函数。为此，您需要另一层功能：

function makeHandlers(index) {
  return {
    'out': function() { slideout(tags[index], pics[index]; },
    'in': function() { slidein(tags[index], pics[index]; }
  };
}

function sliding() {
  for (var i = 0; i < tags.length; ++i) {
    var handlers = makeHandlers(i), tag = document.getElementById(tags[i]);
    tag.onmouseover = handlers.in;
    tag.onmouseout = handlers.out;
  }
}

正如 @BiAiB 所指出的，您对“setTimeout”和“clearTimeout”的调用也需要一些注意。