JavaScript 睡眠函数

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

请尝试这样做：

    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 秒时执行。

Answer 2

您可以使用 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 秒间隔）