Question

使用Polymer 1.0。我需要setTimout，因为当我运行<template is="dom-if" if="{{foo.bar}}">时，<google-youtube>和this.$$('google-youtube');存在竞争条件。为了保持代码清洁，我希望将startPlayer播放器提取出来。但this调用它时，setTimeout(this.startPlayer, 1000);对象无效。我怎样才能解决这个问题？由于这些函数是Object.create()的属性，不确定如何。

<script>
    Polymer({
      is: "video-player",
      behaviors: [ 
        Polymer.PaperDialogBehavior,
        Polymer.NeonAnimationRunnerBehavior
                 ],
      properties: {
        foo: Object,
        entryAnimation: {
          value: 'scale-up-animation'
        }
      },
      listeners: { 'iron-overlay-opened': 'enableElement',
                   'iron-overlay-closed': 'stopPlayer'
      },
      startPlayer: function() {
        youtubePlayer = this.$$('google-youtube');
        if (youtubePlayer.playbackstarted) {
         youtubePlayer.play();
        }
      },
      enableElement: function(e) {
        //this.playAnimation();
        this.foo = { bar: true};
        setTimeout(this.startPlayer, 1000);
      },
      stopPlayer: function(e) {
        youtubePlayer = this.$$('google-youtube');
        youtubePlayer.pause();
        youtubePlayer.seekTo(5);
      }
    });
  </script>

Answer 1

替换它：

setTimeout(this.startPlayer, 1000);

......用这个：

setTimeout(this.startPlayer.bind(this), 1000);

如果您不熟悉.bind()的工作原理，请参考MDN docs的简要说明：

bind（）方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在新的函数前面提供任何给定的参数序列函数被调用。

请注意，＆lt; = IE8中不提供.bind()，但polyfill非常容易。如果您不是polyfilling的粉丝（并且您需要在IE8中获得支持），您还可以使用以下代码替换该行代码：

var self = this;
setTimeout(function() {
    self.startPlayer();
}, 1000);

聚合物 - 此功能无法使用

1 个答案: