fix: 修改notification 在for 循环下调用api 时，打开通知动画生硬问题

[Zhou-Bill]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

fix: #47086

💡 Background and solution

// 省略部分代码， onClick 点击后执行
for (let i = 0; i < 2; i++) {
  notification.error({
    message: 'Notification Title',
    description: `This is the content of the notification. This is the content of the notification. This is the content of the notification.`,
    duration: 30,
  });
}

for 循环调用api 时，会先进队列，但实际上队列中只有一个任务，即每次任务队列都是只有一个任务。看上面的例子，在首次加载时，因为要初始化，所以任务队列中有2个任务，当挂载完后，再次点击onClick, 会发现每次都调用各自方法的全流程，但实际上应该是先进队列，然后再依次执行。

// 伪代码
function A() {
  for (let i = 0; i < 3; i++) {
   // 各自执行b，进队，执行doC,  队列中每次只有一个任务。
    B(i)
  }
}

const taskQueue = []

function B(i) {
  taskQueue.push({
    key: i
  })
  // 解决方案: 这里应该加个锁，当锁为false 再异步执行taskQueue,  doC 函数跑完后重置锁
  doC(taskQueue)
}

function doC() {
  // 执行队列
  while (taskQueue.length) {
    const task = taskQueue.shift()
    console.log(task.key)
  }
}

const el = document.getElementById('el')  

el.onclick = A()

目前方案是加一个锁以及一个promise，让for 循环中的任务都先进队列，然后再按顺序执行队列中的任务

📝 Changelog

Language	Changelog
🇺🇸 English	fix : notification in Loop, to smooth notification render on ui
🇨🇳 Chinese	修改notification 在for 循环下调用api 时，打开通知动画生硬问题

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

👁 Visual Regression Report for PR #47688 Failed ❌

🎯 Target branch: master (b2a83e4)
📖 View Full Report ↗︎

Image name	Expected	Actual	Diff
qr-code-Popover.dark.png

Check Full Report for details

[github-actions]

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.