Ways to halt code execution if the component is not actively in use in Nativescript Vue

I'm facing an issue with my application where it continues to send data about the device every 5 seconds even when I minimize the app and reopen it or navigate away from the page. This leads to a situation where the function of sending data is triggered multiple times, causing data to be sent twice as often. How can I solve this problem?

My approach:

sendDeviceInfo(){
                console.log("1111");
                axios.post('', {
                    device: DeviceInfo.systemManufacturer() + ' ' +DeviceInfo.deviceName(),
                    deviceId: DeviceInfo.deviceId(),
                    appId: DeviceInfo.appVersion(),
                    email: this.email,
                    battery: DeviceInfo.batteryLevel(),
                    batteryCharging: DeviceInfo.isBatteryCharging() === true ? 1 : 0
                });
            }

Mounting the method:

this.sendDeviceInfo();
setInterval(this.sendDeviceInfo, 5000);
vue.jsnativescriptnativescript-vue

Answer №1

Ensure to stop the interval when the component is no longer needed. The setInterval function gives you a handle that can be used for clearing it.

data: () => ({
    ...yourDataStuff,
    sendInfoTimer: null
}),

mounted() {
    this.sendInfoTimer = setInterval(this.sendInfo, 5000);
},

beforeDestroy() {
    clearInterval(this.sendInfoTimer);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Oops! Looks like there's an issue with the rendering function or template in this component - it

After following the instructions in the tutorial at , I attempted to implement the example but encountered an issue that seems to be missing from the guide. const Vue = require('vue'); const server = require('express')(); const vssr = ...

node.jsvue.jsvue-ssr

Encountered error code 422 Unprocessable_entity upon submitting form to Rails API via Vue.js application

Currently, I am in the process of developing an application using Rails 6 Api as a backend and Vue as a standalone web app. After successfully setting up my sign-up form, I encountered a frustrating issue upon submission where I received a Completed 422 U ...

ruby-on-railsvue.js

Combining the Powers of VueJs and Laravel

Currently, I am diving into Vuejs and building a feature that allows users to mark a message as their favorite. However, I've encountered the following error. Any guidance on how to resolve this would be highly appreciated. [Vue warn]: Failed to mo ...

laravelvue.js

Issues encountered with vue element checkbox functionality while in edit mode

I am currently utilizing checkboxes provided by Vue Element. You can take a look at them here: . However, I am encountering an issue where users are unable to select checkboxes in edit mode. Any assistance would be greatly appreciated. <el-checkbox-g ...

vue.jsvue-component

Adding a character at the current cursor position in VUE JS

My quest for inserting emojis in a textarea at the exact cursor position has led me to an extensive search on Vue JS techniques. However, most resources available online provide solutions using plain Javascript. Here is the code snippet I am working with: ...

javascriptvue.jsvuejs2

"Building your own utilities in Nuxtjs: A step-by-step guide

Currently, I am using Nuxtjs version 2.15.4 and I am looking to update my Utils functionality. Currently, I am using a mixin for my utils but I would like to implement something similar to the following code snippet: import {func1 , func3} from '~/plu ...

vue.jsvuejs2nuxt.js

Managing active dropdown menus in VueJS

I'm having trouble figuring out why my navigation menu and method to open subitems on click are not working correctly. [![dropdown_menu][1]][1] new Vue({ el: '#app', data: { //menu "menu_title": "a", "child_ro ...

javascripthtmlcssvue.jsvuejs2

Achieve a smooth sliding effect for a div element in Vue using transition

When utilizing transitions in conjunction with v-if, it appears that the div is initially created and then the animation occurs within that div. Is there a way to have the div move along with the text during the animation? For example, when clicking on th ...

vue.jsvue-transitions

Storing various data entries within a MySQL database through the use of Vuex

I am currently facing an issue with inserting multiple data into my database using Vuex. Despite only inserting two data points, I keep getting the error message: COLUMN DOESN'T MATCH VALUE COUNT AT ROW 1. https://i.stack.imgur.com/qBcvK.png Below i ...

vue.jsvuejs2vuex

It is advised not to use arrow functions to assign data when fetching API data with axios in Vue.js 2

Trying to retrieve data from a URL using Axios in my Vue app is resulting in the error message: Error: Arrow function should not return assignment Complete error message: Error: Arrow function should not return assignment (no-return-assign) at src\co ...

javascriptvue.jseslint

Tips for putting distance between the digits in a number

Is there a way in Vue to format an input field that displays "10000" as "10 000" when typed by the user? ...

vue.js

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

I am facing an issue where I have brought a span to display a loading image inside the v-Dialog of a vuejs screen. The problem is that the v-dialog has a z-index of 220 set as inline style, causing my new span (loading image) to appear below the v-dialog. ...

jquerycssvue.jsz-index

Communication between child and parent components in Vue.js is an essential feature

Attempting to invoke functions from my component to Vue for the login process. This is the code snippet of my component : Vue.component('auths', { data: function() { return { ip: '', sessiontoken: '' } ...

javascriptvue.jsvue-component

vue-router does not automatically navigate to a new route

Despite my numerous attempts to find the solution, I can't seem to figure out what is going wrong. I have been following this example. Here is how my VueRouter instance looks like. const router = new VueRouter({ mode: "history", routes: [ { ...

vue.jsvuejs2vue-router

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

After utilizing Vue.js single file components to construct a website and appreciating the modular approach, I've encountered an issue. The browser appears to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue ...

javascriptcssvue.jsnpmwebpack

Transferring dynamic slots through parent, child, and grandchild components

Is there a way to pass dynamic slots from parent components all the way down to grandchildren? I have experience with static named slots, but I'm unsure about how to deal with dynamic named slots. For instance, let's assume that the slot templa ...

vue.jsvue-component

"Mastering the Composition API in Vue 3: A guide to defining props within the setup() method

I created a custom "loading state" mixin specifically for Vue 2: export default { props: { loading: { type: Boolean, default: false }, }, data () { return { innerLoading: false, } }, mounted () { this.innerLo ...

vue.jsvuejs3vue-composition-apivue-mixin

The function Event.preventDefault seems ineffective when attempting to block input of CJK (Korean) characters in a v-text-field of type

Currently, I am tackling an issue in a Vue project where I need to fix a small bug. However, the solution seems quite challenging. I have managed to make the v-text-field accept only numerical input, which is functioning well. <v-text-field type=" ...

javascripthtmlvue.jsvuetify.js

Vue component lifecycle hook to fetch data from Firebase

Looking for a solution with Vue 2 component that utilizes Vuefire to connect declaratively with a Firebase real-time database: import { db } from '../firebase/db' export default { data: () => ({ cats: [] }), firebase: { ...

javascriptfirebasevue.jsfirebase-realtime-databasevuefire

Is it possible to implement sanctum on multiple Vue projects simultaneously?

Greetings! I am currently using Sanctum to authenticate users in the system. My goal is for a user who logs in to vue project num1 to also be automatically logged in to vue project num2. I attempted to implement this functionality using cookies like so: $ ...

phplaravelvue.jssessioncookies