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

首页课程实战体系课手记专栏慕课教程

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

来源：8-6 取消计时器clearTimeout()

慕粉4203582

2016-10-31 17:49

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的延迟隐藏与显示。

写回答关注

2回答

stone310: 2016-11-01 09:33:23

已采纳

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

<!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>

4 0

stone3... 回复慕粉4203...

你说的是一个很对的问题，多个的时候，调用同一个timer定时器肯定会冲突，因此timer定时器必须分别保存到obtn上面，我改了下，原来的timer为obtn[this.index].timer，这样相当于将定时器储存到每一个obtn上，多个使用就不有冲突

2016-11-01 10:11:47

共 4 条回复 >

stone310: 2016-11-01 10:13:12

<!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 1

慕粉4203...

欧了，完美。

2016-11-02 14:27:25

共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题

请问延迟程序中为什么不能加参数？

回答 2