1

私は楽しみのためにJavaScriptを学んでいて、奇妙な問題を抱えています。独自のフェードイン機能を作成しようとしています。ただし、私のコードは機能しません。「コンテンツ」の div が完全に不透明に表示されるだけです。

setContentOpacity 関数は機能します。私はそれ自体をテストしましたが、魅力的に機能します。

理想的には、1000回の「setTimeout」呼び出しを「スタック」に配置する必要があります。最初の呼び出しでは、タイムアウトなしで不透明度を低く設定し、2番目の呼び出しでは、小さなタイムアウトで不透明度を少し高く設定します。 3000 タイムアウトで不透明度を 1000 に設定する最後の呼び出しまで。

基本的に、不透明度をすぐに 0 に設定し、1 秒で ~333、2 秒で ~666、3 秒で 1000 に設定する必要があります。ここで私の論理は正しいと思います。opacity を設定する呼び出しは、時間の経過とともにフェードイン効果を生み出す方法で解決する必要があります。

したがって、関連するコードは次のとおりです。

<script language='JavaScript' type='text/JavaScript'>

//takes a value from 0-1000
function setContentOpacity(value) {
   document.getElementById('content').style.opacity = value/1000;
   document.getElementById('content').style.filter = 'alpha(opacity=' + value/10 + ')';
}

function fadeInContent(){

setContentOpacity(0);

for (var i=0;i<=1000;i++)
{
   setTimeout(function(){setContentOpacity(i);}, (i*3));
}


}

onload=fadeInContent;

</script>

（注：単純にsetTimeout（setContentOpacity（i）、（i * 3））;を呼び出してみましたが、うまくいかないようで、匿名関数を使用するとわずかに良い結果が得られました）

ここで何が問題なのですか？前もって感謝します！

4

2 に答える 2

2

isetTimeout に代入するときの値を取得する必要があります。

これを試して

for (var i=0;i<=1000;i++)
{
   (function(ind) {
       setTimeout(function(){setContentOpacity(ind);}, (ind*3));

   })(i);
}

ご存じのとおり、変数のスコープは関数スコープです。iまた、 setTimeout のすべてのコールバックで同じ値が共有されます。したがって、i の値は になります1000。そのため、効果がないように見えます。これは、同じ共通スコープによって共有されているため、スコープされた変数の値が常に最後の反復になるためです。. それを囲むことにより、スコープされ Immediately Invoked Function Expressionた値を持つ新しい関数を作成しています。i

フィドルをチェック

于 2013-08-07T23:13:39.210 に答える
0

setTimeoutここでの主な問題は、1000 個のコールバックを作成していることだと思います。代わりに、x 秒ごとに何かを実行したい場合は、setInterval.

var i = 0;
var refreshIntervalId = window.setInterval(function(){
    setContentOpacity( i * 3 );
    i++;

    if( i > 1000 ) {
        clearInterval( refreshIntervalId );
    }
}, 1000);

1 秒に 1 回 (1000 ミリ秒) 実行され、1000 に達するまで毎回不透明度関数を呼び出し、その後再びオフになります。

于 2013-08-07T23:19:48.870 に答える