setTimeout внутри функции сбой

Question

Эта функция принимает аргумент, whichImage. Это объект HTMLImageElement для изображения, с которым мы работаем. Ширина изображения будет уменьшена вдвое, а затем через 3 секунды она вернется к нормальной ширине. Тем не менее, код setTimeout, который должен выполняться через 3 секунды, терпит неудачу, с сообщением об ошибке, что whichImage не определен. Что мне нужно, чтобы исправить эту функцию?

function resizeImageFunction(whichImage){ 
    // Get the width of the image 
    alert(whichImage); 
    var width = whichImage.width; 
    var halfwidth = Math.round(width/2); 
    whichImage.width=halfwidth; 
    setTimeout("whichImage.width=width;",3000); 
} 

Answer 1

function resizeImageFunction(whichImage){ 
    // Get the width of the image 
    alert(whichImage); 
    var width = whichImage.width; 
    var halfwidth = Math.round(width/2); 
    whichImage.width=halfwidth; 

    setTimeout(function(){ 
     whichImage.width=width; 
    },3000); 
} 

Answer 2

Вам нужно обернуть блок кода в анонимной функции, как:

setTimeout(function() { 
    whichImage.width=width; 
}, 3000); 

Answer 3

Try:

setTimeout(function() { 
    whichImage.width=width; 
},3000); 

Answer 4

Вам не нужно использовать Eval для этого

setTimeout(function() { whichImage.width=width; } ,3000); 

Вот ваша функция

function resizeImageFunction(whichImage){ 
    var halfwidth = Math.round(width/2); 
    whichImage.width=halfwidth; 
    setTimeout(function() { whichImage.width=width; } ,3000); 
} 

Answer 5

Объяснение вашей проблемы заключается в следующем:

Когда вы передаете строку setTimeout(), эта строка будет оцениваться eval() в глобальном масштабе. Таким образом, любая функция, которую вы вызываете или которую вы указываете, должна быть доступна из глобальной области. Это объясняет, почему вы не можете ссылаться на локальную переменную или аргумент на вашу функцию, потому что ни они, ни те, которые находятся в глобальной области, поэтому, когда eval() пытается их найти, он просматривает глобальную область, и их там нет.

При изменении функции setTimeout() на это, используя встроенный анонимную функцию:

setTimeout(function() { 
    whichImage.width = width; 
}, 3000); 

Теперь у вас есть реальный Javascript код (а не строка), которое вычисляется в месте, где она существует без использования eval() и из-за закрытия у вас есть полный доступ к локальным переменным и аргументам закрывающей функции, которая дает вам доступ как к whichImage (аргумент), так и к width (локальная переменная), поэтому ваш код работает.

Это причина №14, в которой вы всегда должны использовать реальные ссылки на функции javascript или анонимные объявления функций вместо передачи строки в setTimeout().