JavaScript Sleep Function

Question

У меня есть ротатор баннеров, который обновляется каждые 60 секунд, однако я также хотел бы, чтобы каждый баннер отображался в течение 20 секунд, поскольку их 3. Я знаю, куда поместить код setInterval, как указано в моем комментарии, но я не могу заставить его работать. Любая помощь или предложения очень ценятся.

var banners1 = {
    0:
    {
        'href': 'http://www.example.com/banner1.html',
        'src': 'http://www.example.com/banner1.gif'
    },
    1:
    {
        'href': 'http://www.example.com/banner2.html',
        'src': 'http://www.example.com/banner2.gif'
    },
    2:
    {
        'href': 'http://www.example.com/banner3.html',
        'src': 'http://www.example.com/banner3.gif'
    }

}
window.addEvent('domready', function() {
        function banner1()
        {
            var banner = $('banner1');
            var banner1Link = $('banner1').getElement('a');
            var banner1Image = $('banner1').getElement('img');

            for (var keys in banners1) {
                var object = banners1[keys];
                for (var property in object) {
                    if (property == 'href') {
                        var href = object[property];
                    }
                    if (property == 'src') {
                        var src = object[property];
                    }
                }
                banner1Link.setProperty('href', href);
                banner1Image.setProperty('src', src);
                console.log(href);
                console.log(src);
                /** wait 20 seconds **/
            }
        }
        var periodical = banner1.periodical(60000);
});

Answer 1

Вы можете использовать тайм-аут JavaScript

 setTimeout('', 20000);

Это будет добавлено сразу после 20-секундного комментария. Первая переменная - это любой код / ​​функция, которую вы хотите вызвать. а вторая - это количество времени, необходимое для его вызова в миллисекундах (20 секунд).

---

Отредактированный ответ

 <script type="text/javascript">
    var imgs1 = new Array("http://www.omniadiamond.com/images/jwplayer/enel_culture.png","http://www.omniadiamond.com/images/jwplayer/evas_srm.png","http://www.omniadiamond.com/images/jwplayer/jackolantern.png");
    var lnks1 = new Array("http://test.com","http://test.com","http://test.com");
    var alt1 = new Array("test","test","test");
    var currentAd1 = 0;
    var imgCt1 = 3;
    function cycle1() {
      if (currentAd1 == imgCt1) {
        currentAd1 = 0;
      }
    var banner1 = document.getElementById('adBanner1');
    var link1 = document.getElementById('adLink1');
      banner1.src=imgs1[currentAd1]
      banner1.alt=alt1[currentAd1]
      document.getElementById('adLink1').href=lnks1[currentAd1]
      currentAd1++;
    }
      window.setInterval("cycle1()",20000);
    </script>
    <a href="http://test.com" id="adLink1" target="_top">
    <img src="http://www.omniadiamond.com/images/jwplayer/enel_culture.png" id="adBanner1" border="0"></a>

Это цикл по всем трем за 60 секунд с интервалом в 20 секунд. и может быть просмотрено в http://jsfiddle.net/jawilliams346614/wAKGp/ (установлен интервал в 1 сек)

Answer 2

Попробуйте вместо этого:

    function banner1()
    {
        var banner = $('banner1');
        var banner1Link = $('banner1').getElement('a');
        var banner1Image = $('banner1').getElement('img');

        var delay = 0;
        for (var keys in banners1) {
            var func = (function(key) { return function() {
                var object = banners1[key];
                for (var property in object) {
                    if (property == 'href') {
                        var href = object[property];
                    }
                    if (property == 'src') {
                        var src = object[property];
                    }
                }
                banner1Link.setProperty('href', href);
                banner1Image.setProperty('src', src);
                console.log(href);
                console.log(src);
            }; })(keys);

            setTimeout(func, delay);
            delay += 20000;
        }
    }

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

При таком подходе все три обновления планируются за один раз. Они будут выполняться через 0 секунд (немедленно), 20 секунд и 40 секунд с момента запуска сценария.