Creating a never-ending loop with Vue.js and JavaScript in an asynchronous function

My current approach involves using an async function to interpolate specific elements from the DOM, and while it is effective, I am unable to pass the lint verification. This has led me to seek out alternative solutions. Below is my existing code:

 async mounted() {
    let colorMap = interpolate(['#fffbfb', '#ff4141']);

    let i

    // eslint-disable-next-line no-constant-condition
    while (true) {
      let switchColor = false
      for (i = 0; i < 100; i++) {
        let group = this.blinkingGroup
        if (!switchColor) {
          colorMap = interpolate(['#ff4141', '#fffbfb']);
        } else {
          colorMap = interpolate(['#fffbfb', '#ff4141']);
        }
        group.forEach(value => {
          try {
            value.dom.style.stroke = colorMap(i * 0.01)
          } catch (e) {
            //console.log(e)
          }
        })
        await new Promise(r => setTimeout(r, 10));
        switchColor = true

      }
    }
  }

Answer №1

Update: As pointed out in the comments, requestAnimationFrame is a more suitable choice in this scenario:

What makes it better?

  • The browser can optimize it for smoother animations
  • An inactive tab will pause animations, giving the CPU a break
  • It is more energy-efficient and battery-friendly

To learn more about RequestAnimationFrame, check out this link and this one


Alternatively,
consider using setInterval instead of while(true)

setInterval(function, milliseconds)

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

Are 'const' and 'let' interchangeable in Typescript?

Exploring AngularJS 2 and Typescript led me to create something using these technologies as a way to grasp the basics of Typescript. Through various sources, I delved into modules, Typescript concepts, with one particularly interesting topic discussing the ...

Transferring Session ID between Express.js and Socket.io while dealing with iframes from distinct origins

My Node application built with Express.js and Socket.io is facing an issue where they are not sharing the same session ID when running under iframe with different origins. When accessed directly or through iframes with the same origin, everything works fin ...

Sort out the DIVs containing card elements

Is there a way to filter DIVs containing cards based on their categories? I seem to be encountering an issue where the filtering only works with letters. I suspect the problem lies in the Javascript code, but I can't pinpoint it. Can you help me ident ...

Erase all records using MongoDB by the following criteria or

I am currently working with a calendar document structured as shown below: calendar: [ {days: { 1: [], 2: ['surprise'], 3: [], ... }}, {days: { 1: [], 2: [], 3: ['test'], ... }} ] My task involves locating specific ...

Tips for aligning an element vertically when it has a float using CSS or JavaScript

I am struggling with centering the image within the article list loop I created. The code snippet looks like this: <article class="article <?php if($i%2==0) { echo 'even'; } else { echo 'odd'; } ?>"> <section class ...

The error message "Type 'Observable<void>' cannot be assigned to type 'Observable<IComment[]>' in ngrx" is indicating a mismatch in types within ngrx

Recently, I've been diving into learning ngrx by following a guide. The code in the guide matches mine, but I encountered the following error: Type 'Observable<void>' is not assignable to type 'Observable<IComment[]>'. ...

Using jQuery to gradually diminish the text content within a text field

I am facing a challenge that has me scratching my head. Despite being well-versed in jQuery and JavaScript, I can't seem to figure this out. I've developed a basic plugin that clears a text input upon focus and displays the default value if no te ...

Is there a way for me to locate a forum using a JWT Token?

I am searching for a way to retrieve forums using JWT Token. If a user has created 3 forums, I want to display them in a list. My Request is structured like this : ### http://localhost:8080/forum/getByOwnerID Authorization: Bearer {{adminToken}} Alternat ...

Distinguishing between production and development environments in frontend web development using Express and HTML

I am developing a web app using Express and Node.js in the backend, with HTML files being served in the front-end without any framework. To specify the location of these front-end files in the backend, I use: app.use('/public', express.static(pat ...

Tips for limiting the maximum number of characters in CkEditor 5 for react js

Is there a way to limit the amount of characters in a CKEditor textarea in a React JS environment? I'm trying to set a maximum character count for the text area in CKEditor Does anyone have any examples or suggestions on how to achieve this? retur ...

Utilizing v-for and v-show together within a single template element

Currently, I have successfully implemented a process where I can retrieve JSON data from a server, parse it, store it in a Vuex.Store, and then use v-for-"entry in this.$store.state.entries" to iterate through the list of entries. At this point, all entri ...

Click event to reset the variable

The code snippet in Javascript below is designed to execute the function doSomethingWithSelectedText, which verifies if any text is currently selected by utilizing the function getSelectedObj. The getSelectedObj function returns an object that contains in ...

What could be causing the iViewUI `<Slider>` template to not appear in my project?

The Slider component is not appearing on the page (it is blank). I added the iview library using npm: npm install iview --save-dev In my main.js: import iView from 'iview' Vue.use(iView) In my Reommend.vue component: <template> < ...

Combine the click event and onkeydown event within a single function

I have a function that sends a message when the Enter key is pressed. However, I also created a button to send a message, but when I call this function, the message doesn't send, even though I added a click event. function inputKeyDown(event, input ...

Using Javascript to test a specific item in an asp Listbox

Let's consider a scenario where there is ListBox1 containing the following listitem: <asp:ListItem Value="No.1">No.1</asp:listitem> In addition, we have a label for a test purpose: <asp:Label ID="lblLabel" runat="server" Text="Label ...

Arrangement of Vuetify's v-btn and v-input components within a v-card-action section

I'm currently working on aligning some v-btn's and a v-input to create a Record Navigation control. I'm struggling to get them to align in the horizontal center. This is what I have so far: https://i.sstatic.net/6MRjk.png But my goal is to ...

Unable to transfer the variable name between different node modules for the purpose of using it as a chat room identifier in a socket.io application

Users are able to provide a room name, however when using module.exports in a separate file to retrieve it, the value shows as undefined. This issue likely arises from the asynchronous nature of the process. //roomcheck.js var nsp = io.of("/gameroom"); n ...

How can I retrieve the Id from a TextField in MUI when the select property is activated?

I am struggling to retrieve the id from the mui TextFiled element when the select property is activated. However, I am always getting an undefined value. Here is the code snippet: export default ({ onChangeSelect, input, label, options, ...

Appending a row to a table will not trigger events in Select2

Despite several attempts, I can't seem to get the select2:select event working on dynamically added rows in a table using select2. The event only works on the original row. Unfortunately, I don't have any additional details about this issue. COD ...

Adding text in CKEditor with Angular while preserving the existing formatting

To add my merge field text at the current selection, I use this code: editor.model.change(writer => { var position = editor.model.document.selection.getFirstPosition(); // trying to connect with the last node position.stickiness = 'toP ...