javascript - 关于JS定时器与for循环的问题，求大神帮助；-PHP中文网问答

黄舟2017-04-10 17:06:34 10楼

把你的sih()函数定义放到window.onload里面，然后，在setInterval函数里，调用的时候，这样写setInterval(sih, 1000)

赞 +0

添加回复

高洛峰2017-04-10 17:06:34 9楼

setInterval函数的第一个参数可以为一个函数对象或一个用字符串表示的js代码段；
但是使用字符串时，字符串表示的代码作用域处于最外层，也就是全局作用域下，那么sih变量就要在全局作用域下寻找，而在全局作用域下没有sih这个变量定义

修改方法，传入函数对象而非字符串

oinput_1.onclick = function(){
    setInterval(sih,1000);
}

赞 +0

添加回复

伊谢尔伦2017-04-10 17:06:34 8楼

oinput_1.onclick 也放到 inload里去

赞 +0

添加回复

ringa_lee2017-04-10 17:06:34 7楼

把你setInterval传入的函数名后面的括号去掉

赞 +0

添加回复

ringa_lee2017-04-10 17:06:34 6楼

你的点击函数也要放在window.onload里面的

赞 +0

添加回复

天蓬老师2017-04-10 17:06:34 5楼

你的 sih() 是放在 onload 的 function 里边的，但是在 setInterval 引用时却是在它（作用域）外边的，所以要把 onclick 处理整体挪到 onload 的 function 里边去才行。

赞 +0

添加回复

巴扎黑2017-04-10 17:06:34 4楼

下面的可以：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
        //获取ID styl的子节点UI，并通过document.createElement与appendChild的配合，在UL里增加10个LI元素。
            window.onload = function(){
                var op_1 = document.getElementById('styl');
                var oul_1 = op_1.getElementsByTagName('ul')[0];
                var oinput_1 =document.getElementById('inp');
                oinput_1.onclick = function(){
                    setInterval("sih()",1000);
                }
                };
                

                function sih(){
                    var op_1 = document.getElementById('styl');
                var oul_1 = op_1.getElementsByTagName('ul')[0];
                    for(var i=0;i<10;i++){
                    var e = document.createElement("li");
                    e.innerHTML = "这是一个文字" + i % 2;
                    oul_1.appendChild(e);
                    if(i%2 == 1){
                        e.style.backgroundColor = "#990099";
                    }
                    else{
                        e.style.backgroundColor = "#012911";
                        e.style.color = "#ffffff";
                    }
                };
                
            }
            
        </script>
    </head>
    <body>
    <input type="button" value="添加LI" id="inp" />
        <p id="styl">
            <ul>
                
            </ul>
            
        </p>
    </body>
</html>

赞 +0

添加回复

PHP中文网2017-04-10 17:06:34 3楼

window.onload = function(){
                var op_1 = document.getElementById('styl');
                var oul_1 = op_1.getElementsByTagName('ul')[0];
                var oinput_1 =document.getElementById('inp');
                num = 0;
                function sih(){
                    if(num >= 10){
                        return false;
                    }
                    var e = document.createElement("li");
                    e.innerHTML = "这是一个文字" + num % 2;
                    oul_1.appendChild(e);
                    if(num%2 == 1){
                        e.style.backgroundColor = "#990099";
                    }else{
                        e.style.backgroundColor = "#012911";
                        e.style.color = "#ffffff";
                    }
                    num++;
                };
                oinput_1.onclick = function(){
                    setInterval(sih,1000);
                }
                
            }

赞 +0

添加回复

大家讲道理2017-04-10 17:06:34 2楼

因为当调用setInterval时传递字符串函数，它会从全局作用域window里查找相关函数，但你的函数定义在onload方法，访问不到，因此不管用。
window.onload = function(){

            function sih(){
                for(var i=0;i<10;i++){
                    var e = document.createElement("li");
                    e.innerHTML = "这是一个文字" + i % 2;
                    oul_1.appendChild(e);
                    if(i%2 == 1){
                        e.style.backgroundColor = "#990099";
                    }
                    else{
                        e.style.backgroundColor = "#012911";
                        e.style.color = "#ffffff";
                    }
                };
            };

            var oinput_1 =document.getElementById('inp');
            var op_1 = document.getElementById('styl');
            var oul_1 = op_1.getElementsByTagName('ul')[0];
            oinput_1.onclick = function(){
                setInterval(function(){
                    sih();
                },1000);
            }
        }

赞 +0

添加回复

大家讲道理2017-04-10 17:06:34 1楼

你的代码有两个地方要注意：

1，就是报错，找不到sin，这个按照@kikong说的思路解决即可

oinput_1.onclick = function(){
    setInterval(sih,1000);
}

2，在解决报错后，你的代码和你要实现的需求不一致，点击按钮后会1s钟生成十行li，应修改sin函数不用for 循环处理，可以参考以下代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
        //获取ID styl的子节点UI，并通过document.createElement与appendChild的配合，在UL里增加10个LI元素。
            window.onload = function(){
                var op_1 = document.getElementById('styl');
                var oul_1 = op_1.getElementsByTagName('ul')[0];
                var oinput_1 =document.getElementById('inp');
                var i = 1,
                    loop = null;
                function sih(){
                    //for(var i=0;i<10;i++){
                        var e = document.createElement("li");
                        e.innerHTML = "这是一个文字" + i;
                        oul_1.appendChild(e);
                        if(i%2 == 1){
                            e.style.backgroundColor = "#990099";
                        }
                        else{
                            e.style.backgroundColor = "#012911";
                            e.style.color = "#ffffff";
                        }
                        if(i < 10){
                            i++;
                        }else{
                            clearInterval(loop);
                        };
                    //};
                };
                oinput_1.onclick = function(){
                    loop = setInterval(sih,1000);
                }
                
            }
            
        </script>
    </head>
    <body>
    <input type="button" value="添加LI" id="inp" />
        <p id="styl">
            <ul>
                
            </ul>
            
        </p>
    </body>
</html>

赞 +0

添加回复