Форум

Vyacheslav.Y · #1 (**permalink**) 04.12.2015, 20:01

Добрый вечер. Подскажите как запускать функцию через 6с затем 10с, затем 2с, и 20с после загрузки страницы, а после прохождения этих интервалов начинать заново. Т.е. человек зашел на страницу через 6 секунд вылезло сообщение, повисело 8 секунд, убралось, затем вылезло снова на 8 секунд и убралось затем через 10 секунд и т.д. pop-up окно настроил, все работает, а вот с функцией вывода в это окно возникли трудности.
Песочница: http://jsfiddle.net/gS78J/49/

var userNames = ['Сергей', 'Алексей', 'Анна', 'Николай', 'Даниил', 'Вячеслав', 'Джордж', 'Наталья', 'Татьяна', 'Анастасия', 'Евгений', 'Евгения', 'Марина', 'Мария'],
        userCountry = ['Россия', 'Украина', 'Беларусь', 'Казахстан', 'Великобритания'],
        userFlag = ['http://uploads.webflow.com/565cb911c193e4557db200d9/565da100af373f6c6d3ff95e_lang-03.jpg'
    ,'http://www.ua.all.biz/img/ua/catalog/767310.jpeg'
    ,'http://www.belarus.by/relimages/000211_72754.jpg'
    ,'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Flag_of_Kazakhstan.svg/500px-Flag_of_Kazakhstan.svg.png'
    ,'http://uploads.webflow.com/565cb911c193e4557db200d9/565da11183428e142745e8e4_lang-05.jpg'],
 
         namerand = Math.floor(Math.random() * userNames.length),
         countryrand = Math.floor(Math.random() * (userCountry.length));
    console.log(namerand);
 
        $("span.country").text(userCountry[countryrand]);
        $("span.name").text(userNames[namerand]);
        document.getElementById("flag").style.backgroundImage = "url("+userFlag[countryrand]+")";

Mess4me · #2 (**permalink**) 04.12.2015, 20:47

Vyacheslav.Y,
а по такому принципу не подойдет ?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<script>
    $( document ).ready(function() {
       setTimeout(function () {
           alert('ok')
       },1000);
       setTimeout(function () {
           alert('ok1')
       },4000);
          setTimeout(function () {
           alert('ok2')
       },6000);

    });

</script>

</body>
</html>

Vyacheslav.Y · #3 (**permalink**) 05.12.2015, 00:11

Mess4me,
Очень здорово. Можно ее зациклить? Смысл вот в чем: человек зашел на страницу через 6 секунд вылезло сообщение, повисело 9 секунд, убралось, затем вылезло снова на 9 секунд и убралось затем через 10 секунд и т.д. затем интервал 2 секунды, после 20 секунд и в конце концов все заново с шести, и так по кругу, получается нужно делать через бесконечный цикл? или есть другие более простые решения?

Vyacheslav.Y · #4 (**permalink**) 05.12.2015, 15:31

http: //jsfiddle.net/gS78J/51/ готовое решение.

< !doctype html > <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <style>
            #flag {
                background-size: 20px 15px;
                display        : infine-block;
                height         : 15px;
                width          : 20px;
            }

        </style>
    </head>
    <body>
        <div>
            <span class="name">Sergey</span>,
            <span class="country">Russia</span>
            <div id="flag"></div>
        </div>
        <script>
            var userNames   = [
                    'Сергей',
                    'Алексей',
                    'Анна',
                    'Николай',
                    'Даниил',
                    'Вячеслав',
                    'Джордж',
                    'Наталья',
                    'Татьяна',
                    'Анастасия',
                    'Евгений',
                    'Евгения',
                    'Марина',
                    'Мария'
                ],
                userCountry = [
                    'Россия', 'Украина', 'Беларусь', 'Казахстан', 'Великобритания'
                ],
                userFlag    = [
                    'http://uploads.webflow.com/565cb911c193e4557db200d9/565da100af373f6c6d3ff95e_lan' +
                            'g-03.jpg',
                    'http://www.ua.all.biz/img/ua/catalog/767310.jpeg',
                    'http://www.belarus.by/relimages/000211_72754.jpg',
                    'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Flag_of_Kazakhstan.svg' +
                            '/500px-Flag_of_Kazakhstan.svg.png',
                    'http://uploads.webflow.com/565cb911c193e4557db200d9/565da11183428e142745e8e4_lan' +
                            'g-05.jpg'
                ],
                source      = [
                    6000, 10000, 2000, 20000
                ],
                receiver    = [];
            setTimeout(function recursiveFn() {
                var namerand    = Math.floor(Math.random() * userNames.length),
                    countryrand = Math.floor(Math.random() * (userCountry.length));
                console.log(namerand);
                $("span.country").text(userCountry[countryrand]);
                $("span.name").text(userNames[namerand]);
                document
                    .getElementById("flag")
                    .style
                    .backgroundImage = "url(" + userFlag[countryrand] + ")";
                if (!source.length) {
                    source          = receiver.slice();
                    receiver.length = 0;
                } else {
                    receiver.push(source.shift());
                }
                setTimeout(recursiveFn, source[0]);
            }, source[0]);
        </script>
    </body>
</html>

Vyacheslav.Y · #5 (**permalink**) 05.12.2015, 15:32

Форум

Справочник

Discord чат

Курсы javascript