如何每 x 秒调用一次方法？

Posted 2023-02-23

【中文标题】如何每 x 秒调用一次方法？

【英文标题】：How can I call a method every x seconds?

【发布时间】：2019-02-01 04:38:57

【问题描述】：

我需要每秒调用一次方法 getBitcoins()。

试过：我试着把它拿出来放在方法下面 行import Pickaxe from '../assets/pickaxe.png' 然后使用 setInterval 每秒调用一次，但是我无法访问数据 getBitcoins() 中的变量 btcPrice。

所以我需要一种方法来每秒从方法函数中调用 getBitcoins()，就像在下面的代码中一样。

<template>
  <div id="wrapper">
    <div class="top"></div>
    <!-- Center -->
    <div class="center">
      <img :src="Pickaxe" class="Pickaxe">
      <span class="my-btc"> mybtc.toFixed(8) </span>
      <span id="btc">1 BTC =  btcPrice </span>
      <button class="Mine">Mine</button>
      <span class="hashes">btcMin btc/min</span>
      <button class="Upgrade">UPGRADE</button>
      <span class="upgradePrice"> upgradePrice btc</span>
    </div>
  </div>
</template>

<script>
  import bitcoin from '../assets/bitcoin.svg'
  import Pickaxe from '../assets/pickaxe.png'

  export default 
    name: 'landing-page',
    data() 
      return 
        bitcoin,
        Pickaxe,
   
        mybtc: 1,
        btcPrice: null,
        btcMin: 0,

        upgradePrice: 0

      
    ,
    methods: 
      getBitcoins() 
        var currentPrice = new XMLHttpRequest();
        currentPrice.open('GET', 'https://api.gdax.com/products/BTC-USD/book', true);
        currentPrice.onreadystatechange = function()
          if(currentPrice.readyState == 4)
            let ticker = JSON.parse(currentPrice.responseText);
            let price = ticker.bids[0][0];
        document.getElementById('btc').innerhtml = "1 BTC = " + price + "$";
       ;
      ;
        currentPrice.send();
      
    
  
</script>

【问题讨论】：

how to use setInterval in vue component的可能重复

【参考方案1】：

我认为这应该可以满足您的需求。

created() 
    this.interval = setInterval(() => this.getBitcoins(), 1000);
,

不需要在创建的事件上注册它，你可以在其他方法上注册它，甚至在观察者上。 如果您这样做，则必须以某种方式检查它是否尚未注册，因为它可能会导致多个循环同时运行。

【讨论】：

我试过这个，但我遇到了一个问题，那就是当我返回（到上一页/组件）时，函数会一直在后面运行。如何避免？

@MoeenMH，将它保存在一个方法上，用方法的名称调用它，设置另一个调用 clearInterval 函数的方法来停止它。我的意思是这样的逻辑，具体实现看你自己。

谢谢伙计，我最终把clearInterval() 放在了beforeDestory 块中