javascript - 这里的setTimeout 0是解决什么问题呢

问题描述

问 题

  if (!this.isShown()) {
    return;
  }
  this.$container.trigger('beforeHide.modal.cmp', {modal: this});
  this.$container.addClass(HIDE_CLS);
  setTimeout(function () {
    this.$container.trigger('afterHide.modal.cmp', {modal: this});
  }.bind(this), 0);

解决方案

完整代码大概是：

function hide(){
  if (!this.isShown()) {
    return;
  }
  this.$container.trigger('beforeHide.modal.cmp', {modal: this});
  this.$container.addClass(HIDE_CLS);
  setTimeout(function () {
    this.$container.trigger('afterHide.modal.cmp', {modal: this});
  }.bind(this), 0);

}

这里有一种情况，是 addClass 之后，对应的样式在 hide 执行完之前不会生效（只是有可能，各浏览器表现可能还不一样，除了 addClass 其它一些更改也是类似，如果你像我一样不想去管这里面的细节，类似情况，一个 setTimeout 也许就足以解决问题，比较偷懒的作法）。

那么，想要达到的一个效果，就像是说，在 hide 函数执行完之后，尽快地去做另一件确定的事，这个尽快，就是 setTimeout(f, 0) 的作用了，细节上，你确实是不知道尽快到底是什么时候， setTimeout 只是确保了这个地方有一个上下文切换（这里说的上下文跟 this 那东西不是一回事，指的是异步执行的环境）。

那么，在不考虑 addClass 效果的情况下，这个 setTimeout 是否多余呢？

如果单看 hide ，那么它是多余的。但是事实上，你还要看 hide 被调用时的上下文情况，这里的情况会比较复杂。一个现成的例子，是 angular 中的 $digest 调用。$digest调用如果是在一个被监控的上下文环境中的话，是会报错的，比如：

<div ng-click="test()">点击</div>

$scope.test = function(){
    $scope.$digest(); // 报错
}

套个 setTimeout 就没问题了：

$scope.test = function(){
    setTimeout(function(){
        $scope.$digest();
    }, 0);
}

总的来说， setTimeout(f, 0) 都是一种偷懒的，随意性的方法。

这篇关于javascript - 这里的setTimeout 0是解决什么问题呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！