jQuery slide show-почему этот код работает?

Я был в середине кодирования слайд-шоу на javascript с помощью jquery, когда я столкнулся с чем-то, что делало мои несколько строк кода в паре строк.

Проблема в том, что я не понимаю, как это работает, поэтому я могу изменить его. 
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

Теперь каждый раз, когда он выполняется, ни один из этих кодов не изменяет ни одну из переменных. cnt всегда будет равно imgs.length (3), imgs.length++ на самом деле не изменяет его, он просто добавляет один для этого единственного выполнения, правильно?

Поэтому неважно, сколько раз он выполняется, он всегда будет imgs[1], но когда я выполняю код, он правильно проходит через все объекты массива.

Редактировать:

Я просто добавил alert(imgs.length); и подтвердил, что ++ действительно изменяет переменную, но это все еще не имеет смысла для меня.

Первый запуск, imgs.length = 4 после ++. 4 % 3 = 1 поэтому он должен запускать array object [1] не [0]?

Второй заход, 5 % 3 = 2

Третий заход, 6 % 3 = 0

И т. д.. но он никогда не должен сбрасываться. Однако, если я ставлю alert(imgs.length % cnt);, он возвращает только 0, 1, 2, чем сбрасывает.

Почему?

6 2
jquery slideshow modulo

6 ответов:

Возвращаемое значение imgs.length++ равно 3, следовательно, 3% 3 = 0, но imgs.length будет 4, а массив 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, он добавляет один элемент в массив. так что не хороший код, но короткий:)

EDIT : Почему легко ответить, в начале он содержит cnt количество элементов, поэтому код будет наступать на каждое изображение и начинается с его начала. так что если массив imgs содержит элементы 5 он пройдет через элементы 5 и начнет с самого начала.

Единственная проблема с этим кодом, что массив будет увеличиваться каждый раз, и память будет съедена браузером.

3

Я уверен, что вы знаете, что imgs.length++, если бы он был применен к любой другой переменной, добавил бы к ней одну, изменив исходную переменную.

var x = 1;
alert(x++); // alerts 1
alert(x); // alerts 2
Конечно, именно это и происходит.

Скрипт увеличивает длину массива imgs при каждом запуске, поэтому он перемещается от 3 до 4, от 5 до 6 и т. д. Я не эксперт по внутренним функциям Javascript, поэтому я не уверен, что это как-то влияет на производительность, но если вы понимаете, что length На самом деле является доступным для записи свойством, все это делает чувство.

2

(imgs.длина++) % cnt

Заставит образы повторяться через каждое изображение снова и снова.

Знак процента ( % ) в JavaScript означает, что он использует оператор Modulus (остаток от деления).

Примеры:

  • 0 % 3 = 0
  • 1 % 3 = 1
  • 2 % 3 = 2
  • 3 % 3 = 0
  • 4 % 3 = 1
  • 5 % 3 = 2 и т.д...
0

Ну, каждая 4-я секунда, которую запускает функция Slider, расширяет массив, так что вы получаете: 

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

И так далее:)

0

Я не уверен на 100% в javascript, но каждый другой язык, который я знаю imgs.length++, это то же самое, что сказать imgs.length = imgs.length + 1, так что это должно быть изменено.

Я бы счел это "умным трюком", который должен быть задокументирован, если он вообще используется. это как бы ломает семантику того, что означает длина, поэтому, хотя логически правильно для компьютера, это не совсем имеет смысл в отношении имени свойства

Так что я думаю, что он действительно меняет длину, но я все равно не рекомендовал бы использовать его без документирование этого. Более ясным методом было бы объявить новый var i = 0 и заменить imgs.length++ на i++, потому что, хотя это, вероятно, не имеет значения в этом случае, если вы делаете что-то еще с массивом, длина теперь, вероятно, не та, что вы ожидаете.

Что касается редактирования:
6 % 3 - это 0, а не 3.
Модуль (в программировании, немного отличающийся чисто математическим термином) означает деление и взятие остатка.
6 / 3 = 2 с остатком 0.
7 / 3 = 2 с остаток от 1.
8 / 3 = 2 с остатком 2.
9 / 3 = 3 с остатком 0,

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");
   });
}
0