Дмитрий Беляев

let lock;
function a(data) {
    Promise.resolve(lock).then(() => send(data));
}

function b() {
    lock = Promise.all([
        lock,
        asyncRequestPromise().catch(err => {
            // обработка ошибки, иначе все упадет
        })
    ]).then(() => lock = void 0); // чистим память
}

a("some data");

Что не так с кодом js?

он некорректный с самой первой строки...

// тут очевидно было пропущено объявление переменной куда сохраняем полученный из DOM canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// вангую, что тут не объявленные переменные, и их нужно объявить
var x = 0;
var y = 0;
var x1 = 0;
var y1 = 0;
var g = 4;
var b = 7;

// тут норм, но все же стоит включить себе линтер
// ибо порядок в коде == порядок в голове
var ground1 = new Image();
ground1.src = "Ground.png";
var pick1 = new Image();
pick1.src = "Pick.png";

// а вот в функции draw началась полная дичь...
function draw() {
  ctx.clearRect(0,0,316,632); // очистку перенес внутрь функции отрисовки

  // тут я вырезал addEventListener - ибо добавлять нового подписчика на каждой отрисовке - дичь полнейшая
  // пристрелите того, кто Вас этому научил, так Вы сделаете этот мир лучше

  if(g < b) {
    ctx.drawImage(ground1, x, y);
    x+=32;
    if(x-32 > 290){
      x = 0;
      y+=32;
    }
    if(y-32 > 578){
      y = 0;
      x = 0;
    }
  }

  // я так думаю эту картинку надо рисовать после фона
  ctx.drawImage(pick1, x1, y1);

  requestAnimationFrame(draw); //зациклим анимацию
}

// анимировать что-то по таймеру плохая затея, есть более подходящие инструменты
requestAnimationFrame(draw);

// подписку на событие клавиатуры вынес из отрисовки
// а саму отрисовку выкинул из обработчика
// его дело переменные пересчитывать, а рисовать будет draw
document.addEventListener("keydown", function pick(e) {
  if(e.keyCode == 87){
    y1-=32;
  }
  if(e.keyCode == 65){
    x1-=32;
  }
  if(e.keyCode == 83){
    y1+=32;
  }
  if(e.keyCode == 68){
    x1+=32;
  }
});

по хорошему надо еще, чтоб цифры от времени зависели, ибо requestAnimationFrame будет вызывать вкфц с частотой соответствующей доступному FPS

class Pizza {
    constructor() {
        this.crust = prompt('Choose your crust: ');
        this.toppingsCount = +prompt('How many toppings do you want?') || 0;
        this.toppings = [];
    }

    makeToppings() {
        const {toppings, toppingsCount} = this;
        for(let i = toppingsCount; i--;) {
            toppings.push(prompt('Choose your topping: '));
        }
    }

    makePizza() {
        const {crust, toppings} = this;
        return `Your order is done! You choose ${crust} crust with these toppings: ${toppings.length ? toppings.join(', ') : 'nothing'}`;
    }
}

let personalPizza = new Pizza();
personalPizza.makeTopping();
console.log(personalPizza.makePizza());

У Вас ожидается полная загрузка файла, прежде чем отдать его на воспроизведение, файл очень большой для mp3 и отдается с весьма маленькой скоростью (за 6 минут у меня загрузилось 2.8МБ на инете 100мб/с и файл на этом не закончился).
Вообще создается ощущение, что там стрим, а не просто файл, тогда ждать воспроизведения Вы будете вообще вечно.
Вам нужно забирать данные по частям, небольшими порциями и каждую порцию отдавать в sourceBuffer, но не раньше, чем закончится декодинг предыдущей части (очереди в помощь)

https://developer.mozilla.org/en-US/docs/Web/CSS/s...

Не сочтите за саморекламу, но https://www.npmjs.com/package/@bingo347/fn

import chain from '@bingo347/fn/mappers/chain';
import extractField from '@bingo347/fn/mappers/extractField';

// создаем функцию для безопасного извлечения
const getBCDE = chain(
  extractField('B'),
  extractField('C'),
  extractField('D'),
  extractField('E')
);

// извлекаем
const ABCDE = getBCDE(A);

Полноценно можно сделать только используя Proxy, но работать будет только в окружении ES-2015 (большинство актуальных браузеров уже поддерживают)
Не полноценно (зато будет работать в браузерах типа IE) - можно сделать через хак предложенный 0xD34F с возвратом своего объекта (функции) из конструктора

Пример с Proxy:

const TestClass = (function() {
    class TestClass {
        constructor() {
            this.calls = '';
        }

        toString() {
            return this.calls;
        }
    }

    Object.setPrototypeOf(TestClass.prototype, Function.prototype);

    function callTestClassInstance(el) {
        this.calls += String(el);
    }

    return new Proxy(TestClass, {
        construct(TestClass, args) {
            const instance = new TestClass(...args);
            const target = args => callTestClassInstance.apply(instance, args);
            Object.setPrototypeOf(target, TestClass.prototype);
            return new Proxy(target, {
                apply(target, _, args) {
                    return target(args);
                },
                get(_, name) {
                    return instance[name];
                },
                set(_, name, value) {
                    instance[name] = value;
                    return true;
                },
                has(_, name) {
                    return name in instance;
                },
                deleteProperty(_, name) {
                    return delete instance[name];
                },
                defineProperty(_, name, descriptor) {
                    return Object.defineProperty(instance, name, descriptor);
                },
                getOwnPropertyDescriptor(_, name) {
                    return Object.getOwnPropertyDescriptor(instance, name);
                },
                ownKeys() {
                    return Object.getOwnPropertyNames(instance).concat(Object.getOwnPropertySymbols(instance));
                }
            });
        }
    });
})();

У Вас должно быть 2 вариант куки, которые устанавливаются заранее, а на сервере должен вестись подсчет, сколько какой куки Вы уже выдали раньше. Если у пользователя нет куки, то выбираем какую ставить на основе этого подсчета. Проще говоря, первому посетителю Вы ставите куку А, потом 9 человек получают В.

Для google analytics ставьте utm метки в url (можно на js через history API)

А Вы в консоль заглядывать пробовали?
canvas.clone is undefined

подключите такой модуль к проекту:

const appleDevice     = /iP(hone|od|ad)/;
const applePhone      = /iPhone/i;
const appleIPod       = /iPod/i;
const appleTablet     = /iPad/i;
const androidPhone    = /(?=.*\bAndroid\b)(?=.*\bMobile\b)/i;
const androidTablet   = /Android/i;
const windowsPhone    = /Windows Phone/i;
const windowsTablet   = /(?=.*\bWindows\b)(?=.*\bARM\b)/i;
const otherBlackberry = /BlackBerry/i;
const otherOpera      = /Opera Mini/i;
const otherFirefox    = /(?=.*\bFirefox\b)(?=.*\bMobile\b)/i;
const sevenInch       = /(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)/i;

function match(regex, target = navigator.userAgent) {
    return regex.test(target);
}

export const isAppleDevice = match(applePhone) || match(appleIPod) || match(appleTablet) || match(appleDevice, navigator.platform);
export const isAndroidDevice = match(androidPhone) || match(androidTablet);
export const isWindowsDevice = match(windowsPhone) || match(windowsTablet);
export const isOtherDevice = match(otherBlackberry) || match(otherOpera) || match(otherFirefox);
export const isSevenInch = match(sevenInch);
export const isMobileDevice = isAppleDevice || isAndroidDevice || isWindowsDevice || isOtherDevice || isSevenInch;
export const isEmulator = isMobileDevice && !isWindowsDevice && (match(/Mac/, navigator.platform) || match(/Win32/, navigator.platform));

далее импортируйте нужный флаг, и проверяйте через if

// мне кажется, что ждать полной загрузки страницы тут незачем
document.addEventListener('DOMContentLoaded', () => {
    new Slider({
        images: ".slider__galary img",
        btnPrev: ".btnPrev",
        btnNext: ".btnNext",
        rate: false
    });
});

// хелпер для прослушивания событий
class EventListener {
    constructor(ctx, handlers, target) {
        this.ctx = ctx;
        this.handlers = handlers;
        Object.keys(handlers).forEach(event => target.addEventListener(event, this));
    }

    handleEvent(event) {
        const {handlers, ctx} = this;
        const {type} = event;
        if(typeof handlers[type] !== 'function') return;
        handlers[type].call(ctx, event);
    }
}

class Slider {
  construnctor({images, btnPrev, btnNext, rate, time = 1000}) {
        this.images = document.querySelectorAll(images);
        this.i = 0;
        new EventListener(this, {
            click: this.prev
        }, document.querySelector(btnPrev));
        new EventListener(this, {
            click: this.next
        }, document.querySelector(btnNext));
        if(rate) {
            setInterval(() => this.next(), time);
        }
    }
    
    prev() {
        this.images[i].classList.remove("showed");
        this.i--;
        if(this.i < 0){
            this.i = this.images.length - 1;
        }
        this.images[i].classList.add("showed");
    }

    next() {
        this.images[i].classList.remove("showed");
        this.i++;
        if(this.i >= this.images.length){
            this.i = 0;
        }
        this.images[i].classList.add("showed");
    }
}