Не работает рекурсия, не могу понять почему?

Question

[Алексей Верховцев]

Всем привет, на сайте есть несколько иконок с классом .chat им задана зеленая картинка, если добавляю класс gray, то картинка меняется на серую, нужно, чтобы постоянно менялись картинки, написал рекурсивную функцию, но она срабатывает только самый первый раз и всё, больше не работает, не могу понять в чём беда, заранее спасибо.

<script>
      var iconsChat;
      var classArray;
      function changeIconChat() {
        iconsChat = $('.chat');
        iconsChat.each(function() {
          classArray = $(this).attr('class').split(' ');
          for(var i = 0; i < classArray.length; i++) {
            if(classArray[i] == 'gray') {
              $(this).removeClass('gray');
            }
            else {
              $(this).addClass('gray');
            }
          }
        });
        setTimeout('changeIconChat', 2000);
      }
      $(function() {
        $('.no-photo .profile-photo > a').on('click', function(e) {
          e.preventDefault();
          $(this).addClass('disabled').find('.ask-photo p').addClass('disabled').html('Request was sent');
        });
        changeIconChat();
      });
    </script>

Answer 1

[Александр Коротаев]

setTimeout(changeIconChat, 2000); надо вынести название функции из скобок

Answer 2

[Rsa97]

Жуть.
Во-первых, как отметил Александр Коротаев, название функции надо передавать без кавычек, либо в кавычках, но тогда со скобками "changeIconChat()".
Во-вторых, для повторяющихся вызовов есть отдельная функция setInterval.
В третьих, для проверки наличия класса есть функция hasClass.
В четвёртых, вы в цикле для каждого класса, не являющегося 'gray' добавляете класс 'gray', в результате если установлен только класс 'gray', то при первом вызове он удалится и в следующий раз цикл вообще ни разу не выполнится. А если есть хоть один класс, кроме 'gray', то класс 'gray' будет устанавливаться на каждой итерации цикла и сниматься на последней итерации ('gray').

function changeIconChat() {
    $('.chat').each(function() {
        if ($(this).hasClass('gray'))
          $(this).removeClass('gray');
        else
          $(this).addClass('gray');
    });
}
setInterval(changeIconChat, 2000);

Comments

[Алексей Верховцев]

Да, вы правы, а я пытался изначально сделать через hasClass, но я не так метод вызвал, он не заработал и я сделал то, что вы видел выше, спасибо за лаконичное решение

[Kovalsky]

Алексей Верховцев: вам совсем незачем явно вызывать each и проверять наличие класса, можете просто для нужной коллекции элементов вызывать toggleClass. Этот код будет работать так же, как код Rsa97:

function changeIconChat() {
    $('.chat').toggleClass('gray');
}
setInterval(changeIconChat, 2000);

Как-то так