Как заставить работать JS в IE?

Question

[dvoch]

Приветствую!
Друзья, помогите пожалуйста разобраться.
Не работает JS в IE =( Что не так?

<script>

    class TextScramble {
        constructor(el) {
            this.el = el
            this.chars = '1234567890'
            this.update = this.update.bind(this)
        }
        setText(newText) {
            const oldText = this.el.innerText
            const length = Math.max(oldText.length, newText.length)
            const promise = new Promise((resolve) => this.resolve = resolve)
            this.queue = []
            for (let i = 0; i < length; i++) {
                const from = oldText[i] || ''
                const to = newText[i] || ''
                const start = Math.floor(Math.random() * 50 )
                const end = start + Math.floor(Math.random() * 50)
                this.queue.push({ from, to, start, end })
            }
            cancelAnimationFrame(this.frameRequest)
            this.frame = 0
            this.update()
            return promise
        }
        update() {
            let output = ''
            let complete = 0
            for (let i = 0, n = this.queue.length; i < n; i++) {
                let { from, to, start, end, char } = this.queue[i]
                if (this.frame >= end) {
                    complete++
                    output += to
                } else if (this.frame >= start) {
                    if (!char || Math.random() < 5) {
                        char = this.randomChar()
                        this.queue[i].char = char
                    }
                    output += `<span class="dud">${char}</span>`
                } else {
                    output += from
                }
            }
            this.el.innerHTML = output
            if (complete === this.queue.length) {
                this.resolve()
            } else {
                this.frameRequest = requestAnimationFrame(this.update)
                this.frame++
            }
        }
        randomChar() {
            return this.chars[Math.floor(Math.random() * this.chars.length)]
        }
    }

    const phrases = [
        'Сначала появляется этот',
      'Потом этот',
'Все с эффектами',
'И очень круто',
    ]

    const el = document.querySelector('.text')
    const fx = new TextScramble(el)

    let counter = 0
    const next = () => {
        fx.setText(phrases[counter]).then(() => {
            setTimeout(next, 2000)
    })
        counter = (counter + 1) % phrases.length
    }

    next()
    //# sourceURL=pen.js
</script>

Comments

[Сергей delphinpro]

на что ругается-то? хоть бы ошибку сюда переписали...

Answer 1

[Дмитрий]

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var TextScramble = function () {
    function TextScramble(el) {
        _classCallCheck(this, TextScramble);

        this.el = el;
        this.chars = '1234567890';
        this.update = this.update.bind(this);
    }

    _createClass(TextScramble, [{
        key: 'setText',
        value: function setText(newText) {
            var _this = this;

            var oldText = this.el.innerText;
            var length = Math.max(oldText.length, newText.length);
            var promise = new Promise(function (resolve) {
                return _this.resolve = resolve;
            });
            this.queue = [];
            for (var i = 0; i < length; i++) {
                var from = oldText[i] || '';
                var to = newText[i] || '';
                var start = Math.floor(Math.random() * 50);
                var end = start + Math.floor(Math.random() * 50);
                this.queue.push({ from: from, to: to, start: start, end: end });
            }
            cancelAnimationFrame(this.frameRequest);
            this.frame = 0;
            this.update();
            return promise;
        }
    }, {
        key: 'update',
        value: function update() {
            var output = '';
            var complete = 0;
            for (var i = 0, n = this.queue.length; i < n; i++) {
                var _queue$i = this.queue[i];
                var from = _queue$i.from;
                var to = _queue$i.to;
                var start = _queue$i.start;
                var end = _queue$i.end;
                var char = _queue$i.char;

                if (this.frame >= end) {
                    complete++;
                    output += to;
                } else if (this.frame >= start) {
                    if (!char || Math.random() < 5) {
                        char = this.randomChar();
                        this.queue[i].char = char;
                    }
                    output += '<span class="dud">' + char + '</span>';
                } else {
                    output += from;
                }
            }
            this.el.innerHTML = output;
            if (complete === this.queue.length) {
                this.resolve();
            } else {
                this.frameRequest = requestAnimationFrame(this.update);
                this.frame++;
            }
        }
    }, {
        key: 'randomChar',
        value: function randomChar() {
            return this.chars[Math.floor(Math.random() * this.chars.length)];
        }
    }]);

    return TextScramble;
}();

var phrases = ['Сначала появляется этот', 'Потом этот', 'Все с эффектами', 'И очень круто'];

var el = document.querySelector('.text');
var fx = new TextScramble(el);

var counter = 0;
var next = function next() {
    fx.setText(phrases[counter]).then(function () {
        setTimeout(next, 2000);
    });
    counter = (counter + 1) % phrases.length;
};

next();

Comments

[dvoch]

Огромное спасибо! Шикарное решение, действительно работает. Как часики.

[Дмитрий]

dvoch: не за что. Сам к сожалению такой код пока не пишу. Вот конвертер с es6 в es5 https://babeljs.io/repl/

Answer 2

[Денис]

Что ни так?

В общем-то, "не так" с самим IE, а не кодом. Используется синтаксис ES6, который в осле поддерживается, мягко говоря, очень туго, даже в 11-ой версии. Да и объект Promise поддерживается только в IE Edge. Частично может помочь использование Babel JS, но решит ли он все проблемы в осле - не уверен (не проверял).

Answer 3

[dvoch]

Скажите пожалуйста, а почему наблюдаю такую проблему. На некоторых устройствах Android на стандартном браузере тоже не хочет работать код. Например Samsung Galaxy SM-G350.. не запускается.

Comments

[dvoch]

Проверка через онлайн сервисы проходит успешно. В живую на имеющихся андридах и айфонах тоже. Но этот аппарат не даёт спать :(