0xD34F

результат времени как при параллельном выполнении

А почему как? Они у вас выполняются параллельно. Чтобы было последовательно - второй должен создаваться в then первого.

UPD. Вынесено из комментариев:

Получается что new Promise( уже запускает на выполнение код? Его можно как то отложить?

Можно сделать getA и getB функциями, возвращающими промисы - тогда будет как вы хотите:

const getA = () => new Promise((resolve, reject) => {
    console.time('getA');
    setTimeout(() => {
        console.timeEnd('getA');
        resolve(4)
    }, 6000)
});

const getB = () => new Promise((resolve, reject) => {
    console.time('getB');
    setTimeout(() => {
        console.timeEnd('getB');
        resolve(2)
    }, 2000)
});


console.time('get sum');
getA().then(a => {
    getB().then(b => {
        console.log(`result: ${a + b}`);
        console.timeEnd('get sum');
        })
    });

UPD. Cabac_B недоумевает в комментариях по поводу "выполняются параллельно":

Среда исполнения JS уже умеет параллельно?

Ну не буквально же параллельно, и не буквально выполняются - смотрите код, о котором идёт речь. Имелось в виду, что оба промиса ждут своего разрешения одновременно.

Точка с запятой должна быть, а у вас только запятая, точку забыли, забыли точку, вот здесь:

let money,
    price,

Ну пожалуйста, добавьте точку, не хватает точки, добавьте-добавьте-добавьте, чтобы стало так:

let money,
    price;

У вас обработчик mousemove вешается на перемещаемый элемент - естественно, что при выходе курсора за пределы элемента перемещение прекращается. А во втором примере, где всё окей - там обработчик mousemove вешается на document.

Собираем массив с днями:

const days = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];

// или

const days = Array.from({ length: 7 }, (_, i) => new Date(1, 0, i)
  .toLocaleString('ru', { weekday: 'long' })
  .replace(/./, m => m.toUpperCase()
));

Зацикливаем вывод:

for (
  let iDay = 0;
  confirm(`${days[iDay]}. Хотите увидеть следующий день?`);
  iDay = (iDay + 1) % days.length
) ;

сделал это так, но мне кажется, это не совсем производительно и есть решение получше

"Производительно" далеко не всегда значит "лучше". Бывает так, что производительностью можно пренебречь в пользу краткости и читаемости (шутка, являются ли варианты ниже более читаемыми, вопрос спорный). Код - он не только для компьютеров, но и для людей.

Вот, смотрите - одна строка вместо шести ваших:

const lastId = arr.reduce((id, n) => n.glob_id || id, null);
// или
const lastId = (arr.filter(n => n.glob_id).pop() || {}).glob_id;
// или
const lastId = ([...arr].reverse().find(n => n.glob_id) || {}).glob_id;
// или
const lastId = arr.map(n => n.glob_id).filter(Boolean).pop();

Ну а если говорить более серьёзно, то можно перебирать массив от конца к началу, и прерывать цикл после того, как будет обнаружен первый подходящий элемент:

let lastId = null;
for (let i = arr.length; i--;) {
  if (arr[i].glob_id) {
    lastId = arr[i].glob_id;
    break;
  }
}

UPD. Наконец-то подъехал метод, позволяющий решить задачу и коротко, и без стояния на голове. И трёх с половиной лет ждать не пришлось:

const lastId = arr.findLast(n => n.glob_id)?.glob_id;

Определимся с элементом, у которого будем узнавать индекс - внутри кого он находится, что это за элемент, какой у него должен быть класс:

const parentSelector = 'div';
const childSelector = 'p';
const className = 'there';

const siblingsSelector = `${parentSelector} > ${childSelector}`;
const elementSelector = `${siblingsSelector}.${className}`;

Дальше есть варианты:

const index = Array.prototype.findIndex.call(
  document.querySelectorAll(siblingsSelector),
  n => n.classList.contains(className)
);

или

let index = -1;
for (
  let el = document.querySelector(elementSelector);
  el;
  index++, el = el.previousElementSibling
) ;

или

const el = document.querySelector(elementSelector);
const index = el ? [...el.parentNode.children].indexOf(el) : -1;

Если вдруг у элемента могут быть другие соседи, не соответствующие childSelector, и они не должны учитываться, то третий вариант не подходит, а во втором надо заменить index++ на index += el.matches(childSelector).

document.addEventListener('keypress', function(e) {
  if (e.keyCode === 32) {
    console.log('space pressed');
  }
});

document.addEventListener('wheel', function(e) {
  const event = new Event('keypress');
  event.keyCode = 32;
  document.dispatchEvent(event);
});

Где элементы находятся, и сколько с какого конца надо удалить:

const selector = 'div p';
const removeFirst = 5;
const removeLast = 3;

Удаляем:

document.querySelectorAll(selector).forEach((n, i, a) => {
  if (i < removeFirst || i > a.length - removeLast - 1) {
    n.remove();
  }
});

Или, если родитель действительно общий, то можно и так:

document.querySelectorAll([
  `${selector}:nth-child(-n+${removeFirst})`,
  `${selector}:nth-last-child(-n+${removeLast})`,
]).forEach(n => n.replaceWith());

Добавить input'у атрибуты min/max; всем трём элементам добавить общую обёртку (уверен, на странице подобных блоков будет больше одного):

<div class="counter">
  <button class="minus">-</button>
  <input type="number" min="2" max="17" value="5">
  <button class="plus">+</button>
</div>

При обновлении input'а ограничивать новое значение значениями атрибутов min/max (если где-то ограничений быть не должно, то вместо отсутствующих значений атрибутов подставлять +/- бесконечность). Кроме того, неплохо бы обрабатывать пользовательский ввод в input - а ну как кто захочет его напрямую отредактировать, мимо кнопок.

Как это может выглядеть:

const updateInput = change => e =>
  $('input', e.delegateTarget).val(function(i, v) {
    const min = this.min || -Infinity;
    const max = this.max || Infinity;
    return Math.max(min, Math.min(max, (v | 0) + change));
  });

$('.counter')
  .on('click', '.minus', updateInput(-1))
  .on('click', '.plus', updateInput(1))
  .on('input', updateInput(0));

Или, к чёрту jquery:

const updateInput = change => e => {
  const input = e.target.closest('.counter').querySelector('input');
  const min = input.min || -Infinity;
  const max = input.max || Infinity;
  input.value = Math.min(max, Math.max(min, (input.value | 0) + change));
};

document.querySelectorAll('.counter').forEach(function(n) {
  n.querySelector('.minus').addEventListener('click', this[0]);
  n.querySelector('input').addEventListener('input', this[1]);
  n.querySelector('.plus').addEventListener('click', this[2]);
}, [ -1, 0, 1 ].map(updateInput));

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

document.addEventListener('click', ({ target: t }) => {
  const change = -t.matches('.plus') || +t.matches('.minus');
  if (change) {
    const input = t.closest('.counter').querySelector('input');
    input.value -= change;
    input.dispatchEvent(new Event('input', { bubbles: true }));
  }
});

document.addEventListener('input', ({ target: t }) => {
  if (t.closest('.counter')) {
    t.value = Math.min(t.max || Infinity, Math.max(t.min || -Infinity, t.value | 0));
  }
});

А ещё можно добавить кнопкам data-атрибуты, указывающие, на сколько должно быть изменено значение input'а, и тогда проверять у кнопок наличие классов будет не надо:

<button class="minus" data-change="-1">-</button>
<button class="plus" data-change="+1">+</button>

document.addEventListener('input', updateInput);
document.addEventListener('click', updateInput);

function updateInput({ target: t }) {
  const counter = t.closest('.counter');
  if (counter) {
    const input = counter.querySelector('input');
    const min = input.min || -Infinity;
    const max = input.max || Infinity;
    input.value = Math.min(max, Math.max(min, (input.value | 0) + (t.dataset.change | 0)));
  }
}

Надо добавлять к желаемому значению scrollTop текущий scrollTop контейнера, т.е.,

position = anchor.position().top;

замените на

position = anchor.position().top + $('#container').scrollTop();

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

UPD. Сразу не заметил, у вас там отфильтрованным изображениям назначается специальный класс - конечно, вместо :visible лучше использовать его (в примере по ссылке выше можно просто заменить одно на другое).

const buttonSelector = 'button';
const getButtons = () => document.querySelectorAll(buttonSelector);

Вариант раз - делегируем обработку кликов по кнопкам их общему предку, копируем разметку, слева направо:

document.addEventListener('click', ({ target: t }) => {
  if (t.closest(buttonSelector)) {
    const buttons = getButtons();
    const html = Array.from(buttons, n => n.innerHTML);
    for (const [ i, n ] of buttons.entries()) {
      n.innerHTML = html[~-(i || html.length)];
    }
  }
});

Вариант два - обработчик клика назначаем кнопкам, переносим вложенные узлы, справа налево:

const buttons = getButtons();
const onClick = () =>
  buttons.forEach(function(n, i, a) {
    n.append(...(++i < a.length ? a[i].childNodes : this));
  }, [...buttons[0].childNodes]);

buttons.forEach(n => n.addEventListener('click', onClick));

Оборачивайте текст в span'ы - тогда и проблем с поиском и удалением не будет.

Ну а если без span'ов, то... Откуда надо удалить: const el = document.querySelector('.line');.

Удаляем:

el.removeChild(el.childNodes[2]);

// или

el.querySelector('input').nextSibling.remove();

// или

el.lastChild.replaceWith();

// или

el.innerHTML = el.innerHTML.replace(/(>)[\s\S]+/, '$1');

// или

el.innerHTML = el.innerHTML.slice(0, -~el.innerHTML.indexOf('>'));

const $headers = $('.bf-attr-group-header');
$headers.each(i => $headers
  .eq(i)
  .nextUntil($headers.get(i + 1))
  .wrapAll('<div class="wrapper">')
);

или

document.querySelectorAll('.bf-attr-group-header').forEach((n, i, a) => {
  const wrapper = document.createElement('div');
  const elems = [];
  for (let el = n; (el = el.nextElementSibling) && el !== a[i + 1]; elems.push(el)) ;
  wrapper.append(...elems);
  wrapper.classList.add('wrapper');
  n.after(wrapper);
});

По каким кнопкам надо кликать:

const buttons = document.querySelectorAll('кнопки ваши - вам и виднее, каким должен быть селектор');

Счётчик кликов может быть переменной:

for (const n of buttons) {
  let clicks = 0;
  n.onclick = () => n.innerText = 'clicked: '.concat(++clicks);
}

Или data-атрибутом:

buttons.forEach(function(n) {
  n.addEventListener('click', this);
}, ({ currentTarget: t }) => {
  t.textContent = `clicked: ${t.dataset.clicks = -~t.dataset.clicks}`;
});

$('span').text((i, text) => {
  return ~'+-'.indexOf(text.charAt()) ? text : `+${text}`;
});

или

for (const n of document.getElementsByTagName('span')) {
  n.innerText = '+'.slice('+-'.includes(n.innerText[0])) + n.innerText;
}

или

document.querySelectorAll('span').forEach(n => {
  n.textContent = n.textContent.replace(/^(?![+-])/, '+');
});

function find(arr, id) {
  for (const { name, hobbies } of arr) {
    const { title } = hobbies.find(n => n.id === id) || {};
    if (title) {
      return { name, title };
    }
  }

  return null;
}


const data = find(arr, 4);

Делаем нормально: [...new Set(arr)].

И ненормально:

Object.values(arr.reduce((acc, n) => (acc[n] = n, acc), {}))

// или

Array.from(new Map(arr.map(n => [ n, n ])).values())

// или

arr.filter(function(n) {
  return !(this[n] = this.hasOwnProperty(n));
}, {})

// или

arr.filter(((picked, n) => !picked.set(n, picked.has(n)).get(n)).bind(null, new Map))

// или

arr.filter((n, i, a) => i === a.indexOf(n))

// или

arr.reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])