Антон Швец

function openWindowAndPrint(context, title = 'Документ') {
  const win = window.open();
  win.document.write(context);
  win.document.title = title;
  win.focus(); // Required for IE

  ensureImagesLoaded(win.document).then(() => win.print());
  win.onafterprint = () => win.close();

  return win;
}

function ensureImagesLoaded(document, waitTime = 7000) {
  const images = document.querySelectorAll('img');
  const loadedList = Array.from(images).map(imageLoadToPromise);
  const timeout = new Promise(resolve => setTimeout(resolve, waitTime));

  return Promise.race([timeout, Promise.all(loadedList)]);
}

function imageLoadToPromise(img) {
  return new Promise(resolve => img.addEventListener('load', resolve));
}

Еще можно открывать для печати специально подготовленную страницу, на который скрипт слушает событие message.
И отправлять примерно так

win.onload = () => win.postMessage({
      method: 'sendFileData',
      payload,
    }, '*');

windows.open(). Если вызывать через onclick, проблем с блокировкой окна быть не должно?

Обычно браузеры не блокирует попапы, вызванные действиями пользователя.

p.s. Если кто знает способ попроще узнать момент, когда загрузились все картинки - welcome

На этом сайте слушатель клика на кнопке был добавлен с помощью jQuery
В этом случае вы можете удалить всех слушателей с помощью
$('#button.number').off()

this.http.get возвращает Observable, это объект библиотеки rxjs, он не является промисом или thenable и к нему не может быть применен await
Вы можете привести его к промису вот так

return this.http.get(this.env.API_URL + 'video', options).toPromise()

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

getToken(): Observable<string> {
    return from(this.storage.getItem('token'));
}

latest() {
  return this.getToken().pipe(
    switchMap(token => {
        const headers = new HttpHeaders({ auth: token });
        return this.http.get(this.env.API_URL + 'video', { headers });
    }),
  )
}

По втором случае Layout будет помещен в отдельный файл и загрузится при надобности.
Читать тут

обертка возвращает функцию с аргументом x. return function(x) {.
Результат выполнения функции decorate - тоже функция, она сохраняется в переменной fac
И вызываете вы потом эту функцию.

function decorator(func) {
  let cache = new Map();
  return function decoratedFunc(x) {
    if (cache.has(x)) {
      return cache.get(x);
    };
    let result = func.call(this, x);
    cache.set(x, result);
    return result
  }
}

obj.fac = decorator(obj.fac); // obj.fac === decoratedFunc

Note: It's recommended to use the Web Storage API (setItem, getItem, removeItem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.

https://developer.mozilla.org/en-US/docs/Web/API/W...

Простейший конфиг webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

исходники должны лежать в папке src, стартовый файл index.ts
сборка webpack --mode=production
разработка с hmr

webpack-dev-server --mode development --inline --hot

зависимости (версии уже надо обновить наверно)

"devDependencies": {
    "css-loader": "^3.0.0",
    "ts-loader": "^6.0.4",
    "tslint": "^5.18.0",
    "tslint-config-airbnb": "^5.11.1",
    "typescript": "^3.5.2",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }

tsconfig.json (думаю не очень хороший, но рабочий)

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "incremental": true,
    "module": "es6",
    "noImplicitAny": false,
    "outDir": "./dist/",
    "sourceMap": true,
    "target": "es2016"
  }
}

tslint.json - правила для линтера

{
  "extends": "tslint-config-airbnb",
  "rules": {}
}

в html
<script src="dist/bundle.js"></script>

https://jsfiddle.net/melchiorio/umc1x6sL/

Лучше все писать через const

промисы и async это одно и тоже.
И все это лишь сахар для коллбэков разной степени удобности. И вы еще евенты не упомянули. А так же цикл событий, таски/микротаски, квази-асинхронность.

В язык входят те вещи, которые tc39 посчитают достойными этого. Промисы позволили писать цепочки более понятно, асинки избавили от обилия скобочек. Генераторы не прижились и редко где используются, хотя иногда я их применяю, по назначению разумеется, а не для асинхронного выполнения.

И этого еще не хватает, неплохо было бы иметь поддержку Observable на уровне языка, многие браузерные api стали бы удобнее.

Логично же, что они выводятся в порядке попадания в стэк.
Промисы - как раз микротаски, но сначала в стэк (для микротасков - это microtask queue) отправляются 4 и 7 (в общей фазе), потом 4 выполнится и добавит 5 после 7. Потом выполнится 7 и добавит в стэк 9. Ну и так далее.
На 10 microtask queue будет исчерпан и итерация будет закончена.
А 2 выполнятеся уже в следующей итерации цикла.

upd. Поправил ответ.

this у вас в данном случае указывает на глобальный объект.
Если вызвать Quest с new, то this будет указывать на новосозданный объект и Quest будет для него конструктором, тогда answers добавятся в прототип этого объекта.
Но this.prototype.answers все равно не сработает, т.к. prototype это свойство функции в котором хранится ссылка на объект который станет прототипом для всех объектов созданных этой функцией как конструктором.
Следует обращаться просто к this.answers

Если вы хотите написать свой слайдер, оформите его отдельным пакетом.