Попытка сделать функцию с помощью JavaScript для увеличения изображения

Question

У меня есть эта функция:

function zoomImage(i, image, currentWidth, currentHeight, targetWidth, targetHeight){
    var widthStep = (targetWidth - currentWidth) / 100;
    var heightStep = (targetHeight - currentHeight) / 100;
    var newWidth = Math.ceil( currentWidth + i * widthStep );
    var newHeight = Math.ceil( currentHeight + i * heightStep );
    i++;
    var imageZ = document.getElementById(image);
    imageZ.style.width = newWidth+"px";
    imageZ.style.height = newHeight+"px";
    while( i <= 100 )
        t = setTimeout("zoomImage(i, image, currentWidth, currentHeight, targetWidth, targetHeight)",10);
}

Вызывается так:

zoomImage(0, "image1", 200, 150, 260, 195);

Но по какой-то причине страница не перестает загружаться ивылетает в конце концов.Также изображение не становится больше.Что я тут не так делаю?

Answer 1

Полагаю, вы инициализировали i вне функции.Это i, который будет всегда передаваться при выполнении рекурсивного вызова.Это потому, что когда вы задаете строку для setTimeout, она оценивается в глобальной области видимости.

Это означает, что i++ внутри функции влияет только на локальный i, а не на глобальный i, поэтому i равно никогда не увеличивается не увеличивается за пределы 1 + глобального значения.

Вместо этого передайте анонимную функцию, которая вызывает рекурсивный вызов.Таким образом, вы фактически передаете увеличенный i.

while( i <= 100 )
    setTimeout(function() {
         zoomImage(i, image, currentWidth, currentHeight, targetWidth, targetHeight);
    },10);

Конечно, как отмечено в комментариях, while не кажется правильным выбором здесь.