Don't call popup if another one is already on the page-CodePudding

There is a popup (1) that should be called after 15 seconds of being on the page. But if the user opened some other popup(2), then don't call the first one.

popup(1);

mounted() {
 this.openModal();
},

// methods
openModal() {
  setTimeout(() => {
    this.isModalVisible = true;
  }, 15000);
},

How to do it? Perhaps need to stop setTimeOut?

CodePudding user response：

Maybe something like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      isModalVisible: false,
      isModalOther: false
    }
  },
  methods: {
    openModal() {
      setTimeout(() => {
        if(!this.isModalOther) this.isModalVisible = true;
      }, 5000);
    },
    openOtherModal() {
      this.isModalVisible = false
      this.isModalOther = true;
    },
  },
  mounted() {
   this.openModal();
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-if="isModalVisible">popup1</div>
  <div v-if="isModalOther">popup2</div>
  <button @click="openOtherModal">open popup2</button>
</div>

CodePudding user response：

To cancel a timeout, all you need to do is call clearTimeout(TimeoutID);. A timeoutID is a returned by the setTimeout() method automatically, so just save it in a variable

let timer = setTimeout(...);

then, when you call popup(2), just add

this.clearTimeout(timer);

and the first popup won't show