Выполнить код, но задержать «возврат» функции в JS - PullRequest
Новая
       9

Выполнить код, но задержать «возврат» функции в JS

2 голосов
/ 27 января 2012

Могу ли я, и если да, то как задержать возврат функции Javascript?

Например, скажем, я использую JS, чтобы установить фон элемента, который использует переходы CSS3, и этот переход требует1 секунду, я хотел бы return функцию после завершения перехода (через 1 секунду).

Как-то так (псевдокод): 

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/

Ответы [ 3 ]

4 голосов
/ 27 января 2012

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

Если вы хотите что-то сделать после завершения анимации, используйте transitionend событие.

0 голосов
/ 27 января 2012

Как насчет предоставления обратного вызова функции и выполнения этого обратного вызова по истечении необходимого промежутка времени. 

function doSomething(callback){
  // execute your transition

  setTimeout(callback,1000);
}

Пример в реальном времени: http://jsfiddle.net/eAMXK/ - вы увидите, что он выводит текущийвремя до консоли, затем через секунду сделайте то же самое.

0 голосов
/ 27 января 2012

Вы не хотите откладывать возврат.Вы хотите выполнить обратный вызов через одну секунду. 

function (element) {
    element.style = 'background: #aaa; transition: all 1s ease-in;' 

    setTimeout(function () {
      // whatever you wanted to do with the element;
    }, 1000);
}

В идеале, как указывает @AndyE, вы не делаете это «через одну секунду», но когда происходит событие transitionend.Это более гибко и обычно правильно.Кросс-браузерная поддержка для этого события пока не так уж и хороша.В зависимости от того, чего вы хотите достичь, «через одну секунду» может быть намного проще в реализации.

...