jQuery до JavaScript Перевод для Append (), One ()

Question

Что будет JavaScript Эквивалентом этих jQuery функций. Это то, что у меня есть, но по какой-то причине я не могу найти эквивалент последней функции.

My Code  
    game[0].appendChild(thisBox);

    setTimeout(function () {
        thisBox.classList.add("move");
    }, random(0, 3000));

    // thisBox.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
    //     function (event) {
    //         $(this).remove();
    //     });

Code I am trying to translate
//insert gift element
  $(".game").append(thisBox);

  //random start for animation
  setTimeout(function(){
    thisBox.addClass("move");
  }, random(0, 5000) );

  thisBox.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
     function(event) {
    $(this).remove();
  });

Answer 1

В форме функции это будет выглядеть так. Ввод будет другим для добавленного третьего параметра из-за элемента, который вы хотите передать для привязки слушателя события.

/**
 * @param {string} eventNames
 * @param {EventTarget} eventTarget
 * @param {function} callback
 */
function one(eventNames, eventTarget, callback) {
  if ('string' !== typeof eventNames || 
    !(eventTarget instanceof EventTarget) || 
    'function' !== typeof callback
  ) return;
  const splitEventNames = eventNames.split(' ');
  for (const eventName of splitEventNames) {
    eventTarget.addEventListener(eventName, callback, { once: true });
  }
}

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

one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', thisBox, function(event) {
  this.remove();
});

Answer 2

Перевод на vanilla JS будет означать добавление прослушивателя событий для каждого из этих типов событий с { once: true }, чтобы каждый обратный вызов события выполнялся только один раз, максимум:

'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'
  .split(' ')
  .forEach((eventName) => {
    thisBox.addEventListener(eventName, () => thisBox.remove(), { once: true });
  });