JavaScript: Действие по таймеру

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

Живой пример

HTML:

Переход <span class="js-timer"></span>

Java-Script. Сам объект для таймера:

<script type="text/javascript">
    /**
     * Объект для работы по таймеру
     * @param startTime Сколько секунд работает таймер
     */
    var timer = function(startTime){
        var self = this;

        var _curTime = startTime;
        var _intervalID = undefined;

        function workTimer(){
            _curTime--;
            if(_curTime < 0){
                self.stop();
                self.onEnd();
            }
            else{
                self.onRun(_curTime);
            }
        };

        /**
         * Сколько секунд осталось
         * @returns {*}
         */
        this.getTime = function(){
            return _curTime
        };

        /**
         * Запустить таймер
         */
        this.start = function(){
            self.onInit();
            _intervalID = window.setInterval(workTimer, 1000);
        };

        /**
         * Остановить таймер
         */
        this.stop = function(){
            window.clearInterval(_intervalID);
        };

        // --- события ---

        // инициализация перед запуском
        this.onInit = function(){};
        // Вызов на секунде работы
        this.onRun = function(){};
        // Окончание работы
        this.onEnd = function(){};
    };
</script>

И использование таймера

    // таймер на 5 секунд
    var timerGo = new timer(5);

    timerGo.onInit = function(){
        this.elShow = $('.js-timer');
        this.onRun();
    };

    timerGo.onRun = function(){
        this.elShow.text(this.getTime() + ' секунд');
    }

    timerGo.onEnd = function(){
        window.location = "http://ya.ru"
    }
    timerGo.start();

JavaScript: Действие по таймеру: 1 комментарий

  1. Уведомление: JavaScript: Действие по таймеру - 2 | ITNote

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *