                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

JS:程序能运行，但是无延迟效果。setTimeout(obtn[this.index].onmouseout=function ()意义何在？

function jianjie()

{

var ms=document.getElementsByTagName('span');

var obtn=document.getElementsByTagName('input');

var i=0;

for (var i = 0; i < obtn.length; i++)

{

obtn[i].index = i;

obtn[i].onclick= function ()

{

ms[this.index].style.display = 'block';

}

obtn[i].onmouseout=function ()

{

setTimeout(obtn[this.index].onmouseout=function () //这句按道理应该是setTimeout(function ()，但是写成这样就不能运行了。

{

ms[this.index].style.display = 'none';

},3000);

}

//主要目的是第三个input控制第三个SPAN的延迟隐藏与显示。

慕粉4203582

2016-10-31

源自：JavaScript进阶篇 8-6

关注问题我要回答

979

操作

收起

2 回答

stone310 回答被采纳 +3 积分
2016-11-01

按照你的思路写了个完整的，应该是这样，几个改动地方有注释：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>
<body>
<div style="width:100px;height:100px;">
    <span>234234</span>
</div>
<input type="button">
<script>
    function jianjie() {
        var ms = document.getElementsByTagName('span');
        var obtn = document.getElementsByTagName('input');
        var i = 0;
        var timer
        for (var i = 0; i < obtn.length; i++) {
            obtn[i].index = i;
            obtn[i].onclick = function () {
                clearTimeout(timer);                 //保证点击时不会隐藏
                ms[this.index].style.display = 'block';
            }
            obtn[i].onmouseout = function () {
                clearTimeout(timer);                  //每次移出时确保只执行一个定时器
                var a = this.index
                //将this.index用a变量来保存，因为this.index只有在事件触发时才会有值，如果设置了settimeout就是undefined，因此用变量将它保存起来
                timer = setTimeout(function () {
                    ms[a].style.display = 'none';
                }, 3000);
            }
        }
    }
    jianjie()
</script>
</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答

慕粉4203582 提问者

精炼到位，运用熟练，是学习的榜样。

2016-11-01 回复有任何疑惑可以回复我~

慕粉4203582 提问者

代码测试有效，但有个小瑕疵，不影响使用。瑕疵是：当同时点击了 2个控制的DIV时，第二个被控制的DIV 可以对应的隐藏，但是第一个DIV控制的对应被控制DIV 不会隐藏。谢谢。

2016-11-01 回复有任何疑惑可以回复我~

慕粉4203582 提问者

clearTimeout(timer); 将第二个清楚定时器去掉，程序好像可以正常运行了。可能我问题没写清楚，所以还是我错了。问题全面解决，谢谢。

2016-11-01 回复有任何疑惑可以回复我~

查看1条回复

stone310
2016-11-01

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>
<body>
<div style="width:100px;height:100px;">
    <span>234234</span>
</div>
<input type="button">
<div style="width:100px;height:100px;">
    <span>234234</span>
</div>
<input type="button">
<div style="width:100px;height:100px;">
    <span>234234</span>
</div>
<input type="button">
<script>
    function jianjie() {
        var ms = document.getElementsByTagName('span');
        var obtn = document.getElementsByTagName('input');
        var i = 0;
        var timer
        for (var i = 0; i < obtn.length; i++) {
            obtn[i].index = i;
            obtn[i].onclick = function () {
                clearTimeout(obtn[this.index].timer);                 //保证点击时不会隐藏
                ms[this.index].style.display = 'block';
            }
            obtn[i].onmouseout = function () {
                clearTimeout(obtn[this.index].timer);    //每次移出时确保只执行一个定时器
                var a = this.index
                //将this.index用a变量来保存，因为this.index只有在事件触发时才会有值，如果设置了settimeout就是undefined，因此用变量将它保存起来
                obtn[this.index].timer = setTimeout(function () {
                    ms[a].style.display = 'none';
                }, 3000);
            }
        }
    }
    jianjie()
</script>
</body>
</html>

1 回复有任何疑惑可以回复我~

收起回答

慕粉4203582 提问者

欧了，完美。

2016-11-02 回复有任何疑惑可以回复我~