Question

我正在阅读Java的Promise类型，在.then(...)

中，我对div的用途感到困惑

function go() {
  showCircle(150, 150, 100).then(div => {
    div.classList.add('message-ball');
    div.append("Hello, world!");
  });
}

function showCircle(cx, cy, radius) {
  let div = document.createElement('div');
  div.style.width = 0;
  div.style.height = 0;
  div.style.left = cx + 'px';
  div.style.top = cy + 'px';
  div.className = 'circle';
  document.body.append(div);

  return new Promise(resolve => {
    setTimeout(() => {
      div.style.width = radius * 2 + 'px';
      div.style.height = radius * 2 + 'px';

      div.addEventListener('transitionend', function handler() {
        div.removeEventListener('transitionend', handler);
        resolve(div);
      });
    }, 0);
  })
}

.message-ball {
  font-size: 20px;
  line-height: 200px;
  text-align: center;
}
.circle {
  transition-property: width, height, margin-left, margin-top;
  transition-duration: 2s;
  position: fixed;
  transform: translateX(-50%) translateY(-50%);
  background-color: red;
  border-radius: 50%;
}

<button onclick="go()">Click me</button>

我想了解“ div”的重要性（尽管我尝试重命名，并且.then(...)正常，但是匿名function ()却不行）。

Answer 1

您的代码showCircle(150, 150, 100).then(div => { } );中的

'div'是从您的promise函数ShowCircle返回的数据。通常，在箭头函数中，lambda表达式（=>）左侧的任何内容都是该函数的输入参数。

div => {
//doSomething here
}

是

function nameFunction(div){
//doSomething here
    }

在promise then 情况下，提供给函数的输入是promise的返回值。这里的参数命名为div，并保存ShowCircle（）的返回值。

Javascript箭头函数中的参数名称

1 个答案: