Javascript рекурсия settimeout - PullRequest
Новая
       20

Javascript рекурсия settimeout

10 голосов
/ 06 апреля 2011

Я только начал изучать javascript, так что, надеюсь, это будет что-то простое.Я хочу сделать слайд-шоу из изображений, которые воспроизводятся автоматически.Это очень просто, и есть несколько уроков, но по какой-то причине я не смог заставить его работать.Вот что у меня есть: 

var image1 = new Image();
var image2 = new Image(); 
var image3 = new Image();
image1.src = "images/website6.jpg";
image2.src = "images/website7.jpg";
image3.src = "images/sunset.jpg";
var images = new Array(
  "images/website6.jpg",
  "images/website7.jpg",
  "images/sunset.jpg"
);
setTimeout("delay(images,0)",2000);
function delay(arr,num){
  document.slide.src = arr[num % 3];
  var number = num + 1;
  setTimeout("delay(arr,number)",1000);
}

Изображение, которое я пытаюсь изменить, имеет идентификатор слайда.И у меня также есть некоторые доказательства того, что это работает.Происходит загрузка первого изображения.Затем загружается второе изображение (что означает, что исходный вызов setTimeout должен работать).Тогда ничего не происходит.Что для меня говорит о том, что рекурсия не работает.

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

Ответы [ 2 ]

20 голосов
/ 06 апреля 2011

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

setTimeout(function() { delay(images, 0); }, 2000);

function delay(arr, num) {
  document.slide.src = arr[num % 3];
  setTimeout(function() { delay(arr, num + 1); }, 1000);
}

В более современных браузерах вы можете использовать метод .bind() дляфункции для создания функции, которая предварительно привязана к чему-то, что будет использоваться как this: 

setTimeout(delay.bind({arr: images, num: 0}), 2000);

function delay() {
  document.slide.src = this.arr[this.num % 3];
  setTimeout(delay.bind({arr: this.arr, num: this.num + 1}), 1000);
}

Шесть из одного, полдюжины из другого, но только в качестве примера, показывающего, что есть несколько способовделать вещи.

2 голосов
/ 06 апреля 2011

Я бы с большим подозрением отнесся ко второму setTimeout звонку.Я бы сделал это более понятным, используя явную функцию вместо строкового выражения 

setTimeout(function() { delay(arr, number); }, 1000);
...