The mouse movement event will not be triggered for every frame when a keyboard event occurs

When the mouse is moving in a browser, ideally the mousemove event should fire every frame. However, if a key is pressed or released (or repeated), the mousemove event stops firing for a frame or two. To test this behavior, you can use the code snippet below:

t0 = new Date().getTime()
window.onmousemove = function() {
    t = new Date().getTime()
    if (t-t0 > 20)
        console.log(t-t0)
    t0 = t
}

Keep your mouse moving and observe the console to see delays of the mousemove event only when there are key press/release actions.

I have personally tested this on Firefox and Chrome browsers using macOS 10.14.2.

As I am developing a web action game, it is crucial that the mouse position is updated every frame. If anyone has any solutions to address this issue, please let me know.

Answer №1

t0 = new Date().getTime()
window.onmousemove = function() {
    t = new Date().getTime()
    if (t-t0 > 2)
        console.log(t-t0)
    t0 = t
}

this script optimizes the performance of console.log(), ensuring it responds quickly even with fast mouse movements or key presses in Chrome on Windows10. It is important to implement a main loop for game development to effectively manage timing, frames, and events.

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

Develop objects with a fixed position - three.js

I am currently working on a game utilizing the three.js library and I have a specific requirement. I would like to incorporate a small "panel" on the screen that remains stationary regardless of the user's navigation through the 3D environment. Essent ...

Creating a seamless vertical marquee of several images that continuously scroll from bottom to top without interruption can be achieved by following these

Currently, I am seeking to design a mobile-friendly HTML page that features a border with multiple color images moving smoothly from bottom to top on both the right and left sides of the mobile screen. The transition should be seamless without any gaps o ...

Placeholder variable not specified in radio buttons

I am currently facing challenges applying validations to radio buttons in Angular. Normally, I create a #templateRefVariable on the input for other input types, which allows me to access the NgControl and use properties like touched. My goal is to set the ...

Struggle with registering fonts in Canvas using JavaScript

I've been struggling to add a custom font to my canvas for hosting the bot. Even though I'm not encountering any errors, the font fails to display on the host. Below is the code snippet: const { AttachmentBuilder } = require('discord.js&apos ...

Pair each element with an array of objects and add them to a fresh array

Let's consider an array of objects like, const attachmentData = [{name: 'Suman Baidh',attachment: ["123","456"]}, {name: 'John Sigma',attachment: ["789","101112]}, ...

Unable to load models in face-api.js even though attempting to infer the models

Currently, I am working on developing an application for face detection. However, I am encountering an error stating "SsdMobilenetv1 - load model before inference" despite loading the models. The Front End HTML File is being sent from the server, ...

Is there a way to activate the autoplay feature for this?

I'm really new to Jquery and most of this code isn't mine, I'm just using it as a learning tool for creating sliders. If someone could give me some guidance on how to make this slider work automatically when the page loads, that would be gre ...

Guide on how to conditionally render Container Classes

Initially, the designer provided me with this: Essentially, a category is passed from the previous screen. Through some UI interactions, I have to render this screen repeatedly. The flow goes like this: you choose a category, if it has subCategories, allo ...

Styling nested divs in CSS

I am experiencing an issue where the child divs within parent divs are overflowing outside of the parent divs. To get a better understanding of the problem, please try running the code below in a browser: My goal is to align the innermost divs horizontall ...

Building and executing an Angular 2 program on the Windows platform: Step-by-step guide

After successfully installing npm and related packages including TypeScript and Angular 2, I am encountering difficulties running Angular 2 in my browser on a Windows platform. Can someone provide a step-by-step guide to help me create and run Angular 2 ...

What is the best method to close a polygon infowindow when hovering over a map marker?

I am currently working on integrating Google Maps which includes a set of polygons representing state boundaries and markers representing cities within each polygon. I want to display information when hovering over a polygon/state. My question is: how can ...

Utilizing a segment of one interface within another interface is the most effective method

In my current project using nextjs and typescript, I have defined two interfaces as shown below: export interface IAccordion { accordionItems: { id: string | number; title: string | React.ReactElement; content: string | React. ...

The structure becomes disrupted when the Material Ui grid is enclosed within a div container

I currently have a responsive dashboard built with Material Ui's Grid elements. One of the grid items is wrapped in a div element, causing the layout to break. Check out the playground with the div element here: https://codesandbox.io/s/basicgrid-mat ...

Enhancing jqgrid by incorporating cellattr to JSON colmodel

I've been experimenting with adding a custom cellattr function to my colmodel JSON response, but I'm having trouble getting it to work. I've tried applying classes and styles without success, so now I'm attempting to debug by logging so ...

How can I use lodash to iterate through and remove whitespace from array elements?

I am currently working on a project involving demo lodash functionality, and I have encountered some unexpected behavior. Within an array of cars, there are various non-string elements mixed in. My goal is to iterate through each element of the array, rem ...

Is it possible to obtain a user's public URL using the Facebook API in version 2?

In version 1, it is possible to obtain the user's public link by using the following endpoint: /v1.0/me function testAPI() { console.log('Welcome! Fetching your information....'); FB.api('/me', function(response) { ...

Issues arise when using the select element

Struggling with submitting my list of items from a select in AngularJS. This is my first time posting here and I'm still finding my way around. The issue lies in using ng-repeat in my HTML to display all items. When the screen loads, it only shows: { ...

Using Reactjs to Send Emails

Trying to incorporate the SmptJs API for email sending using JavaScript has been quite successful in a simple HTML setup. However, I am facing challenges when attempting to integrate it into a ReactJs component! The API documentation and link can be found ...

Having troubles with your jQuery script on Internet Explorer?

I am facing an issue with my script. It is located in an external file and called at the beginning of my HTML page. The script involves an Ajax request that constantly checks a database for updates. When an update is detected, it triggers a specific functi ...

Content moves as you scroll, not within a lightbox

I have implemented lightbox style overlays for my 'Read More' content on my website. However, I am facing an issue where the content within the lightbox does not scroll; instead, the background page scrolls. Any assistance with resolving this p ...