javascript上的arguments.callee的解决方法下滑

Question

I have been following a CSS Tricks article on animating section height and I would like to use the solution in my Angular 2 app. My app has the following function for section expansion:

expandSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;

  // have the element transition to the height of its inner content
  element.style.height = sectionHeight + 'px';

  // when the next css transition finishes (which should be the one we just triggered)
  element.addEventListener('transitionend', function (e) {
    console.log(arguments)
    // remove this event listener so it only gets triggered once
    element.removeEventListener('transitionend', arguments.callee);

    // remove "height" from the element's inline styles, so it can return to its initial value
    element.style.height = null;
  });
}

and the arguments.callee line is throwing an error:

Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

Can someone provide me with a workaround for arguments.callee ?

Answer 1

You could declare the function explicitly :

expandSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;

  // have the element transition to the height of its inner content
  element.style.height = sectionHeight + 'px';

  function myFunc(e) {
    console.log(arguments)
    // remove this event listener so it only gets triggered once
    element.removeEventListener('transitionend', myFunc);

    // remove "height" from the element's inline styles, so it can return to its initial value
    element.style.height = null;
  }

  // when the next css transition finishes (which should be the one we just triggered)
  element.addEventListener('transitionend', myFunc);
}

Answer 2

If you only want the function to run once you can pass this as an option to addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

element.addEventListener('transitionend',  function () {
  console.log(arguments);
  element.style.height = null;
}, { once: true });