2

私は、jqueryを使用してjavascriptでスライドショーをコーディングしている最中に、数行のコードが数行で実行していたことを実行していることに遭遇しました。

問題は、それがどのように機能するのか理解していないので、変更できることです。

var imgs = [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'];
        var cnt = imgs.length;

    $(function() {
        setInterval(Slider, 4000);
    });

    function Slider() {
    $('#imageSlide').fadeOut("slow", function() {
       $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
    });
    }

これは私を得る線です:

[(imgs.length++) % cnt]

私はそれを次のように読んでいます

3+1 % 3 = 1

これで、実行するたびに、そのコードのいずれも変数を変更していないように見えます。 常に(3)にcnt等しくなりますが、実際には変更されません。その1回の実行に対して1つ追加されるだけですよね?imgs.lengthimgs.length++

したがって、実行回数に関係なくimgs[1]、コードを実行すると、すべての配列オブジェクトを適切に実行します。

編集:

変数を実際に変更することを追加alert(imgs.length);して確認しただけ++ですが、それでも意味がありません。

imgs.length = 4++後の最初の実行。4 % 3 = 1したがって、配列オブジェクトを実行する必要は[1]ありません[0]か?

2回目の実行、5 % 3 = 2

3回目の実行、6 % 3 = 0

などなど。ただし、リセットしないでください。しかし、私がそれを置くと、alert(imgs.length % cnt);それはリセットされるよりも0、1、2しか返しません。

なんで?

4

6 に答える 6

3

の戻り値imgs.length++は3であるため、3%3 = 0ですがimgs.length4配列imgsには4項目が含まれます。

コンソールで試してみてください:

var x = [ 1, 2, 3 ]
x.length++
=> 3
x.length++
=> 4
x.length++
=> 5
x
[1, 2, 3, undefined, undefined, undefined]

したがって、呼び出されるたびにimgs.length++、ittは配列に1つの項目を追加します。いいコードではありませんが短いです:)

編集:なぜ答えるのは簡単です、最初にそれはcnt多くの要素を含んでいるので、コードはすべての画像を踏んで、それの最初から始まります。したがって、imgs配列に5アイテムが含まれている場合は、アイテムをステップ実行し5、最初から開始します。

このコードの唯一の問題は、配列が毎回増加し、メモリがブラウザによって消費されることです。

于 2010-01-19T14:50:19.710 に答える
2

imgs.length++他の変数に適用された場合、元の変数を変更して、それに1つ追加することになることをご存知だと思います。

var x = 1;
alert(x++); // alerts 1
alert(x); // alerts 2

案の定、それが起こっていることです。

スクリプトは実行ごとに配列の長さをインクリメントするimgsため、3から4、5から6などに移動します。私はJavascriptの内部の専門家ではないため、パフォーマンスに影響があるかどうかはわかりません。しかし、それが実際には書き込み可能なプロパティであることを理解していればlength、それはすべて理にかなっています。

于 2010-01-19T14:47:07.190 に答える
0

私はjavascriptで100%確信していませんが、私が知っている他のすべての言語は、変更する必要があるimgs.length++と言っているのと同じです。imgs.length = imgs.length + 1

私はそれを「巧妙なトリック」と見なし、使用する場合は文書化する必要があります。これは、長さの意味のセマンティクスを少し破るので、コンピューターに対して論理的には正しいものの、プロパティ名に関してはまったく意味がありません。

したがって、実際には長さが変わると思いますが、それでも文書化せずに使用することはお勧めしません。より明確な方法は、新しい変数を宣言して、i = 0に置き換えることです。この場合はおそらく問題ではありませんが、配列で他のことをしている場合、長さはおそらく期待したものではないためです。 。imgs.length++i++

編集に関して:
6%3は3ではなく0です。
モジュロ(プログラミングでは、純粋な数学用語ではわずかに異なります)は、除算して余りを取ることを意味します。
6/3 = 2、余りは0。7
/ 3 = 2、余りは1。8
/ 3 = 2、余りは2。9
/ 3 = 3、余りは0、

于 2010-01-19T14:43:39.143 に答える
0

(imgs.length ++)%cnt

画像はすべての画像を何度もループします。

JavaScriptのパーセント記号(%)は、モジュラス(除算剰余)演算子を使用することを意味します。

例:

  • 0%3 = 0
  • 1%3 = 1
  • 2%3 = 2
  • 3%3 = 0
  • 4%3 = 1
  • 5%3=2など...
于 2010-01-19T14:55:03.843 に答える
0

さて、関数Sliderが実行する4秒ごとに配列が展開されるので、次のようになります。

3+1 % 3 = 1
4+1 % 3 = 2
5+1 % 3 = 0

等々 :)

于 2010-01-19T15:04:27.443 に答える
0

将来、コードを読みやすくしたい場合は、個人的にコードを次のように変更することをお勧めします。

var imgs = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'];
var i = 0;

$(function() { // This is a shortcut for $(document).ready();
    setInterval(Slider, 4000);
});

function Slider() {
   $('#imageSlide').fadeOut("slow", function() {
      i = (i+1) % imgs.length;
      $(this).attr('src', imgs[i]).fadeIn("slow");
   });
}
于 2010-01-19T15:25:57.567 に答える