执行代码，但延迟'return'JS中的函数

Execute the code but delay the 'return' of a function in JS

本文关键字：JS 函数 return 代码 延迟 执行      更新时间：2023-09-26

我是否能够延迟Javascript函数的返回，如果可以，如何延迟？

例如，假设我使用JS来设置使用CSS3转换的元素的背景，并且该转换需要1秒，那么我希望在转换完成后（1秒后）return函数。

类似这样的东西（伪代码）：

function
    element.style = 'background: #aaa; transition: all 1s ease-in;' // this will take 1 second to transition, although the JS is executed immediately
    after 1 second // delay the return until the CSS3 transition completes.
        return element

我希望这一切都有意义！提前感谢您，非常感谢您的帮助！

每个人都可以看到实际的代码：http://jsfiddle.net/BtNSs/1/

不，您不能这样做。在浏览器中，JavaScript和UI共享同一个线程，因此在JavaScript代码执行完毕之前，动画不会开始。

如果要在动画完成后执行某些操作，请使用transitionend事件。

给函数提供一个回调，并在所需的时间后执行该回调。

function doSomething(callback){
  // execute your transition
  setTimeout(callback,1000);
}

现场示例：http://jsfiddle.net/eAMXK/-您会看到它将当前时间输出到控制台，然后在一秒钟后执行同样的操作。

您不希望延迟返回。您希望在一秒钟后执行回调。

function (element) {
    element.style = 'background: #aaa; transition: all 1s ease-in;' 
    setTimeout(function () {
      // whatever you wanted to do with the element;
    }, 1000);
}

理想情况下，正如@AndyE所指出的，不要在"一秒钟后"进行，而是在transitionend事件发生时进行。这更灵活，而且通常是正确的做法。不过，对该事件的跨浏览器支持还不稳定。根据您想要实现的目标，"一秒钟后"可能更容易实现。

相关文章：