0

このコードは、#slide-container のすべての子要素の表示プロパティを、2 秒の遅延時間で「ブロック」に切り替えることになっています。

var magic = window.setInterval(function(){
    if (document.readyState === "complete") {
            var children = document.getElementById('slide-container').children;
            for (var i = 0; children.length > i; i++ ) {
                setTimeout(function(){
                    children[i].style.display = "block";
                    console.log(i);
                },2000);
            }
            magic = window.clearInterval(magic);
        } else {
            console.log("...");
        }
}, 1000);

私はこのhtmlと一緒にそれを使用しています:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <ul id="slide-container">
            <li style="display: none;"><img src="http://i.imgur.com/8qBcyzc.jpg"></li>
            <li style="display: none;"><img src="http://i.imgur.com/oxMTFTF.png"></li>
            <li style="display: none;"><img src="http://i.imgur.com/JTM6Yqg.jpg"></li>
        </ul>

    </body>
</html>

エラーが発生しますUncaught TypeError: Cannot read property 'style' of undefined

children または children[0] が見つからないと表示されます。しかし、その変数は指定されており、dom ノードが存在します。

4

3 に答える 3

1

setTimeout を IIFE (即時に呼び出される関数式) に入れてみてください。

 for (var i = 0; children.length > i; i++) {
      (function (index) {
                setTimeout(function () {
                    children[index].style.display = "block";
                    console.log(i);
                }, 2000);
            })(i);
        }

フィドルをチェック

の参照はi、 によって実行されるすべての関数に共通setTimeoutです。したがって、内部の関数が実行されるまでに、の値はiを指しchildren.lengthます。

ただし、存在しない要素を参照しchildren[children.length]てエラーをスローする要素はありません。

于 2013-07-19T23:14:53.430 に答える
1

setTimeout準備が整うまでiに の長さにchildrenなるため、 の値を取得する必要がありますi

これを試して

var time = 2000;
for (var i = 0; children.length > i; i++ ) {
    (function( child, time) {
       window.setTimeout(function() {
          child.style.display = "block";
       }, time);
    }( children[i], time));
    time += 2000;
}

または、これを行うことができます。...遅延の問題を修正しました

var hideElement = function( element, time) {
   window.setTimeout(function() {
      element.style.display = 'block';
   }, time);
};

var time = 2000;
for (var i = 0; children.length > i; i++ ) {
   hideElement(children[i], time);
   time += 2000;
}
于 2013-07-19T23:15:03.870 に答える
1

閉鎖の問題。
setTimeout に 3 番目のパラメーターを追加してみてください (機能しません)。

setTimeout(function(i){
   children[i].style.display = "block";
   console.log(i);
}, 2000, i);

例

別の形式:

    var i = 0;
    var timer = setInterval(function () {
        children[i].style.display = "block";
        i++;
        if (i == children.length) {
            clearInterval(timer);
        }
    }, 2000);

例

ES6 が間近に迫っています。このletステートメントは、特に次のような状況向けに作成されています。

for (let i = 0; children.length > i; i++ ) {
   setTimeout(function(){
      children[i].style.display = "block";
      console.log(i);
   }, 2000);
}

しかし、これはあなたが今必要としている答えではありません。これは単なるメモでした。

于 2013-07-19T23:15:25.247 に答える