Recently, I've been working on a menu project for the company I'm employed at and everything seems to be functioning correctly. However, there's this peculiar issue that has been bugging me for days and despite extensive research, I haven't been able to find a similar case online.
The project is built using Vue.js and it retrieves data from a database to sort and display on the menu. Unfortunately, I cannot share the entire code here but I'll provide details about the specific function causing trouble and its position within the project.
The problematic function is nested inside another function called "sortMenuItems()" which gets executed when the Vue page loads. This function is defined within the methods section of the "Fview.vue" file, which is a component of the main "Menu.vue" file.
Here is the snippet of code in question, located inside "sortMenuItems()":
let intervalCounter = setInterval(() => {
counter();
this.flowerArr = randomNarray(menuItems, 16);
}, 27000);
Essentially, this function houses an interval counter that calls a specific function periodically and updates a variable required for the menu to refresh every 27 seconds. While I am aware that setInterval is not always recommended, it serves the purpose effectively in this scenario. What puzzles me is that this function seems to invoke itself without being explicitly called anywhere else in the project. It creates issues because it starts running automatically when sortMenuItems() is triggered. Despite my best efforts to understand this behavior, I remain perplexed by its mysterious invocation. It doesn't conform to the principles of an Immediately Invoked Function Expression (IIFE). Although the project appears to be functioning smoothly, I have preserved this anomaly as a point of discussion and seek clarification from the coding community through this post on Stack Overflow.
Dependencies for the project:
- axios
- concurrently (utilized for a unique cross-origin resource sharing workaround involving a separate JavaScript server)
- core-js
- vue
- vuetify