如何每x秒调用一个方法?

Vaf*_*fle 2 vue.js vuejs2

我需要每秒调用方法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>
Run Code Online (Sandbox Code Playgroud)

Eru*_*iel 12

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

created() {
    this.interval = setInterval(() => this.getBitcoins(), 1000);
},
Run Code Online (Sandbox Code Playgroud)

不必在创建的事件上注册它,您可以在其他方法上甚至在观察程序上注册它。如果以这种方式进行操作,则必须以某种方式检查它是否尚未注册,因为它可能导致多个循环同时运行。

  • 谢谢伙计,我最终将 `clearInterval()` 放在 `beforeDestory` 块中 (3认同)