【问题标题】:Ionic 2 : Set interval离子2:设置间隔
【发布时间】:2017-04-19 08:46:51
【问题描述】:

我尝试在 .ts 文件中设置间隔,但我不明白如何在间隔中使用同一文件中的函数。

解释一下:

我的间隔设置:

this.task = setInterval(function () {
            this.refreshData();
        }, 300);

和我的函数在同一个 ts 文件中:

refreshData() : void{
        console.log('update...');
    }

当我在我的设备上运行时,我遇到了这个错误:

04-19 10:38:57.535 21374-21374/com.ionicframework.app722890 I/chromium: [INFO:CONSOLE(79432)] "TypeError: this.refreshData is not a function
                                                                                      at file:///android_asset/www/build/main.js:10987:18
                                                                                      at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:10284)
                                                                                      at Object.onInvokeTask (file:///android_asset/www/build/main.js:39626:37)
                                                                                      at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:10220)
                                                                                      at e.runTask (file:///android_asset/www/build/polyfills.js:3:7637)
                                                                                      at invoke (file:///android_asset/www/build/polyfills.js:3:11397)
                                                                                      at e.args.(anonymous function) (file:///android_asset/www/build/polyfills.js:2:30193)", source: file:///android_asset/www/build/main.js (79432)

我尝试这种方式但我不工作:

this.task = setInterval(this.refreshData(), 300);

这只会调用我的函数一次。

有人有想法吗?

【问题讨论】:

    标签: javascript angular typescript ionic2 ionic3


    【解决方案1】:

    使用箭头功能

    this.task = setInterval(() => {
      this.refreshData();
    }, 300);
    

    或像这样存储上下文

    let self = this;
    this.task = setInterval(function () {
      self.refreshData();
    }, 300);
    

    或使用bind

    this.task = setInterval((function () {
      this.refreshData();
    }).bind(this), 300);
    

    如果只有一个函数调用:

    this.task = setInterval(this.refreshData.bind(this), 300);
    

    您可以通过https://github.com/getify/You-Dont-Know-JS/tree/1st-ed/this%20%26%20object%20prototypes/ch1.md了解更多信息

    【讨论】:

    • 箭头函数是我们所需要的!谢谢
    【解决方案2】:

    您应该使用带有 => 箭头的 setInterval(),如下所述

       setInterval(() => {      
              console.log('timer');
              //you can call function here
        },5000);
    

    100% 工作。

    【讨论】:

    • 虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。
    • 供将来参考:之所以可行,是因为() => {} 将当前上下文或“this”注入到使用它的回调上下文中。如果您这样做(something) => {},它将使“某事" 以相同的方式可用,这可能是一个变量、函数或其他任何东西。注意措辞,在这里可以找到很好的专业解释:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    【解决方案3】:

    试试这个:

    setInterval(this.refreshData, 300);
    

    【讨论】:

      【解决方案4】:

      我将您的代码复制粘贴到我的应用中。

      这行得通:

      this.task = setInterval( () => {
        this.refreshData();
      }, 300);
      

      【讨论】:

      • 先生在前台工作但如果应用程序是后台则不工作?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多