我收到以下错误:类型错误:幻灯片[i]未定义。
这很奇怪,因为它不应该能够访问幻灯片变量吗?
<script>
$('document').ready(function() {
$.ajax({
type: "POST",
url: "getSlides.php",
data: '',
cache: false,
success: function(response)
{
var slides = JSON.parse(response);
for (var i = 0; i < slides.length; i++) {
setTimeout(function() {
if (slides[i].type === 'image') {
$('#slideshow').html('<img src="' + slides[i].image_video + '" />');
}
}, 2000);
}
}
});
});
</script>
它看起来像循环问题中的经典闭包
$('document').ready(function () {
$.ajax({
type: "POST",
url: "getSlides.php",
dataType: 'json',
cache: false,
success: function (response) {
$.each(slides, function (slide) {
if (slide.type === 'image') {
$('#slideshow').html('<img src="' + slide.image_video + '" />');
}
})
}
});
});
您可以将sildes[i]
代理到setTimeout
函数回调,引用,小提琴示例
$('document').ready(function () {
$.ajax({
type: "POST",
url: "getSlides.php",
data: '',
cache: false,
success: function (response) {
var slides = JSON.parse(response);
for (var i = 0; i < slides.length; i++) {
setTimeout(function (slide) {
if (slide.type === 'image') {
$('#slideshow').html('<img src="' + slide.image_video + '" />');
}
}, 2000, slides[i]);
}
}
});
});
如果我
没记错的话,这是一个经典的错误,setTimeout 将在循环完成后异步执行,所以当回调运行时我应该等于 slides.length。要解决此问题,请为 i 创建一个本地作用域,如下所示:
for (var i = 0; i < slides.length; i++) {
(function(i){
setTimeout(function(callback) {
if (slides[i].type === 'image') {
$('#slideshow').html('<img src="' + slides[i].image_video + '" />');
}
}, 2000);
})(i)
}
因为由于 setTimeOut 它在 2000ms 后调用您的代码,在该时间值 i 是 slides.length,它抛出错误。
您必须为每个超时函数安排一个不同的"i"副本。
success: function (response) {
var slides = JSON.parse(response);
for (var i = 0; i < slides.length; i++) {
doSetTimeout(slides, i);
}
}
function doSetTimeout(slides, i) {
setTimeout(function () {
if (slides[i].type === 'image') {
$('#slideshow').html('<img src="' + slides[i].image_video + '" />');
}
}, 2000);
}
尝试替换:
for (var i = 0; i < slides.length; i++) {
自:
for (var i in slides) {