boga-net

Ну так и вызывайте вторую в той функции которую вы вызываете через setTimeout.

Нет там никаких колбеков, документация-то есть по функциям, или думаете прячут от вас третий аргумент секретный

categories[checkedCategory] - здесь будет возвращен массив категорий. Массив нельзя передать в Object.keys() - потому как метод принимает объект а не массив. Получив массив категорий вы должны пройтись по нему циклом что бы получить сами категории ну или что ещё лучше методом map.

$('.new-game') добавляется динамически на страницу

Вот вы сами на свой вопрос и ответили - нет никакого .new-game в тот момент, когда вы его пытаетесь получить.

Хотелось бы сделать универсальную функцию, чтобы можно было передавать в неё элемент...

Можно передавать селектор вместо элемента, в обработчике mousemove получать элемент, если его нет - ничего не делать, есть - ок, назначаем transform, или что там у вас. Типа так.

Можно так:

var data = {
  fruits : [
    {
      src: 'http://.png',
      data : 'Apple'
    },
    {
      src : 'https://.png',
      data : 'Banana'
    }
  ],
  vegetables : [
    {
      src: 'http://.png',
      data : 'Carrot'
    },
    {
      src : 'https://.png',
      data : 'Potato'
    }
  ]
};

var groups = Object.keys(data);

console.log(groups); // ['fruits', 'vegetables']

Контекст тут ни при чем. Вы просто присваиваете переменные и вызываете обычную функцию. Опустим тему того, что это приравнивается к глобальным переменным, хотя логичнее было бы передавать через аргумент. Проблема в другом.
Когда вы жмете на img (делаете click) идет сравнение, но в методе сравнения запрашивается checkedWord, а эта переменная равна {} (пустому ассоц массиву). Конечно, у такого объекта нет метода text()

https://api.jquery.com/add/

$element1.add($element2).css(...

Конечно юзать GSAP. Основная фича это TimeLine. Т.е. поддержка вашего кода в дальнейшем будет намного проще.
Например вам нужно выполнить последовательно 2 анимации.

Без GSAP:
Вручную ставите задержки, например, первая анимация длится 3 секунды, для второй вам нужно ручками прописать «начать анимацию спустя 3 секунды». Если время первой анимации изменилось, снова переписывать все delay. Представьте если у вас одна анимация состоит из 10 микроанимаций и на сайте несколько анимаций. В случае изменения чего-либо все тайминги считать заново и переписывать. А если по завершению анимации еще нужно что-то сделать, то это полный трешачёк.

GSAP
Вы просто говорите GSAP'у когда закончится первая анимация, начни вторую. Или начни вторую на пол-секунды раньше чем завершится первая. А когда анимация завершится полностью, открой мне попап, например.

Что касается изучения JS, в процессе работы и выучите, просто практикуйтесь как можно больше, а не думайте что же юзать. Берите GSAP и покоряйте.

const wrapObj = document.querySelector('.container');
wrapObj.onclick=function(e){
  for(let i = 0;i<wrapObj.children.length;i++){
    wrapObj.children[i].classList.remove('active');
  }
  e.target.classList.add('active');
  
}

Просто запретите доступ к серверу обновлений, примерно так (для Windows):

C:\Windows\System32\drivers\etc\hosts

127.0.0.1       localhost       www.sublimetext.com
127.0.0.1       localhost       sublimetext.com

Используйте background-attachment: fixed:
https://jsfiddle.net/37b7Lqhu/2/

Альтернативой .each() является .map(), которая собирает в массив всё, что возвращает переданная функция. Дальше с этим массивом вы уже можете делать что угодно.

Но вообще, вы в коде что-то очень странное делаете. Зачем для каждого элемента коллекции получать ещё раз всю коллекцию и считать её длину? Чего вы пытаетесь добиться?

function getRandomSet(lo, hi, n) { // я привык к тому, что min и max - функции )))
    var res = new Set();
    while (res.size < n) res.add(Math.floor(Math.random() * (hi - lo + 1)) + lo);
    return res;
}

console.log(getRandomSet(0, 9, 5));

Может просто перемешать массив чисел?

function shuffle( array ) {
  for(var j, x, i = array.length; i; j = parseInt(Math.random() * i), x = array[--i], array[i] = array[j], array[j] = x);
    return true;
}

var a = [1,2,3,4,5,6,7,8,9];

shuffle(a);

out.innerHTML = a.toString();

https://jsfiddle.net/uhhqben9/

UPDATE:

Все просто — функция перемешивает массив чисел.

Вот ваша функция:

function getRandom(min, max) {
  var arr = [];
  for (var i = 0; i < max; i++) {
    x = Math.floor(Math.random() * (max - min + 1)) + min;
    if (arr.indexOf(x)) {
      return;
    }
    else {
      arr.push(x);
    }
    return arr;
  }
}

Дорабатываем ее с использованием функции shuffle:

function getRandom(min, max) {
  // Получаем массив чисел из диапазона от min до max
  var arr = Array.from(Array(max - min + 1).keys(), x => x + min);
  // Перемешиваем
  shuffle(arr);
  // возвращаем перемешанный массив
  return arr;
}

И можем использовать для получения массивов неповторяющихся случайных чисел

var a = getRandom(3,15);

https://jsfiddle.net/uhhqben9/1/

.

Вы должны четко различать понятие функция и указатель на функцию.
Если очень по-простому, то когда вы пишите так:
test();
то вы выполняете данную функцию

а если так:
var newTest = test;
то вы указываете на функцию как на объект, передавая функцию как объект (а не результат ее работы) в переменную newTest