setTimeout для анимации изображений таблиц

#javascript #settimeout

Вопрос:

У меня есть некоторый код, который изменяет изображения в таблице. Работает нормально, пока я не попытаюсь установить таймер, чтобы замедлить его и сделать так, чтобы казалось, что они как бы разворачиваются, а не просто «защелкиваются» на месте. Любая помощь с благодарностью. Код ниже:

 function showImage(){
    for(i=0; i<SIZE; i  ) {
        var showImage = document.getElementById(i);
        showImage.src = i '.png';
    }
    setTimeout(showImage(),700);
}

1. и в чем проблема с вашим текущим кодом?

2. в любом случае .. ваша функция ShowImage никогда не завершится, как только вы ее введете, поскольку вы вызываете ее снова и снова изнутри

3. Как сказал @DTH, вам нужно передать определение (имя) функции в setTimeout, а не выполнять его. Итак, напишите setTimeout(showImage,700);

Ответ №1:

Редактировать: поместите код внутри немедленно вызываемого выражения функции:

 function showImage(){
    for(i=0; i<SIZE; i  ){
        (function(i){
            setTimeout(function(){
                var img= document.getElementById('image'   i);
                img.src = i   '.png';
            }, i * 100);
        })(i);
    }
}

1. Спасибо, но спецификация назначения запрашивает использование setTimeout для развертывания изображений. У меня он работает нормально в другой функции для таймера обратного отсчета, но не доволен этим (без сомнения, по уважительной причине).

2. Я изменил ответ. Надеюсь, это поможет.

Ответ №2:

Ваша функция будет вызываться снова и снова, поскольку вы разместили вызов функции для самой себя внутри функции. Попробуйте это (не проверено)

 function showImages()
{
    for(i=0; i<SIZE; i  ) {
        setTimeout(function() {
         showImage(i);
        }, 700)      
    }        
}

function showImage(i)
{
  var showImage = document.getElementById(i);
  showImage.src = i '.png';    
}

Если это не сработает, попробуйте настроить свой код, вставив вывод в консоль браузера следующим образом внутри вашего цикла и в вашей функции ShowImage (i):

 console.log("insert what you want to output here");

В Chrome (и других браузерах) нажмите клавишу F12, чтобы вызвать отладчик, и убедитесь, что у вас выбрана вкладка консоль. Теперь вы должны иметь возможность отлаживать свои скрипты с помощью ведения журнала.

1. Спасибо, но я все еще не могу заставить ни одно из них работать. Я также вызываю функцию с помощью кнопки onClick.

2. @shep попробуйте вывести свою переменную ShowImage, чтобы убедиться, что результат в порядке. Также используйте свой код здесь и там, чтобы быть уверенным, что вы попадаете в свою функцию и т.д.

3. @shep: попробуйте это с моим обновленным кодом… Я допустил глупую ошибку 🙂

4. Спасибо за вашу помощь, я попробовал обновить ваш код, но сигары по-прежнему нет. Хотя я понимаю, о чем ты говоришь. Я мог бы попытаться атаковать его другим способом. Или просто уроните его и нанесите удар по маркировке.

5. @shep: добавил еще кое-что к ответу, чтобы помочь вам отлаживать с помощью консоли браузера. Это поможет вам определить, вызываются ли ваши функции и / или проблема заключается в чем-то совершенно другом..