Javascript 将代码移动到聚合物组件时出现问题

我正在尝试实现一些空闲检测代码。多亏了这么多帖子，我让它工作了，但我希望它是聚合物元素的一部分，这样我就可以将

粘贴到我的应用程序的任何地方，并传递一些参数。以下是我所拥有的：

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="idle-fire">

<script>
    Polymer({
        is: 'idle-fire',
        properties: {
            idlelimit: {
                type: Number,
                value: 10
            }
        },
        ready: function() {


        }
    });
</script>
</dom-module>

<script>
    var idleTime = 0;
    $(document).ready(function () {
        //Increment the idle time counter every minute.
        var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

        //Zero the idle timer on mouse movement.
        $(this).mousemove(function (e) {
            idleTime = 0;
        });
        $(this).keypress(function (e) {
            idleTime = 0;
        });
    });
    function timerIncrement() {
        idleTime = idleTime + 1;
        console.log("tick (" + idleTime + ")");
        if (idleTime >= 2) { // in minutes
            console.log("Idle event fired!")
        }
    }
</script>

聚合物({
是:"闲火",，
特性：{
idlelimit：{
类型：数字，
数值：10
}
},
就绪：函数（）{
}
});
var-idleTime=0；
$（文档）.ready（函数（）{
//每分钟增加一次空闲时间计数器。
var idleInterval=setInterval（timerIncrement，60000）；//1分钟
//将鼠标移动时的空闲计时器归零。
$（this）.mousemove（函数（e）{
空闲时间=0；
});
$（此）。按键（功能（e）{
空闲时间=0；
});
});
函数timerIncrement（）{
空闲时间=空闲时间+1；
log（“勾选“+idleTime+”）；
如果（空闲时间>=2）{//分钟
log（“激发了空闲事件！”）
}
}

如果我试图将

标签的任何部分移动到Polymer

ready

功能，它将无法工作。按这种方式，我无法访问

idlelimit

属性

任何方向都欢迎

如果我试图将

标签的任何部分移动到Polymer

ready

功能，它将无法工作。按这种方式，我无法访问

idlelimit

属性

设置回调时，可能没有正确绑定上下文（即，

此

）。如果您完全忘记执行此操作，计时器回调的上下文将是外部上下文（

窗口

对象），而不是Polymer对象，其中可以使用

idlelimit

下面是设置

timerIncrement

回调上下文的一种方法：

// in Polymer object
setupTimer: function() {
  setInterval(timerIncrement.bind(this), 1000);
}

或者，您可以使用ES6 arrow函数为您自动绑定上下文：

// in Polymer object
setupTimer: function() {
  setInterval(() => {
    this.idleTime++; // `this` is Polymer object
  }, 1000);
}

下面是该代码到聚合物的转换：

HTMLImports.whenReady（（）=>{
聚合物({
是:"闲火",，
特性：{
idlelimit：{
类型：数字，
数值：10
}
},
附：函数（）{
//每秒钟增加一次空闲时间计数器。
this.\u idleInterval=setInterval（this.\u timerIncrement.bind（this），1000）；
这个。_idleTime=0；
//鼠标移动或按键时将空闲计时器归零。
document.onmousemove=（）=>{this.\u idleTime=0}；
document.onkeypress=（）=>{this.\u idleTime=0}；
},
分离：函数（）{
clearInterval（此._idleInterval）；
},
_timerIncrement:函数（）{
const idleTime=++this.\u idleTime；
log（“勾选（“+idleTime+”），this.idlelimit）；
对于此演示，如果（idleTime>=this.idlelimit）{//以秒为单位
log（“激发了空闲事件！”）；
clearInterval（此._idleInterval）；
}
}
});
});

请参阅DevTools控制台中的计时器
将鼠标移到此文档上，或按任意键重新启动计时器
您是否尝试过将您的代码保留在Polymer的构造函数之外，正如我应该提到的那样，是的，它可以工作，但是我无法访问像
idlelimit
这样的参数。我将更新问题。您可以使用
document.querySelector（'idle-fire'）.idlelimit
访问它。顺便说一句，您已经将资本
V
用于
value
。这将不起作用
v
应该小写。感谢
idlejs
链接@斯科特：没问题：）