# How to resolve the delay after event occurs

**URL:** <https://discourse.processing.org/t/how-to-resolve-the-delay-after-event-occurs/29440>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 17, 2021, 8:12am UTC](https://discourse.processing.org/t/how-to-resolve-the-delay-after-event-occurs/29440 "2021-04-17T08:12:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 17, 2021, 8:12am UTC](https://discourse.processing.org/t/how-to-resolve-the-delay-after-event-occurs/29440/1 "2021-04-17T08:12:31Z")

</div>

the code as following

```javascript
let bgColor = 200;
let div;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(bgColor);
  div = createDiv();
  div.style("background","rgb(123, 0, 0, 0.1)");
  div.style("width", "100px");
  div.style("height", "100px");
  div.position(0, 0);
  div.mouseMoved(goto);
}

function goto() {
  div.position(mouseX-50, mouseY-50);
}

```

I want to move the red square following the mouse when the mouse is over it, but when my mouse moves fastly enough, the event can’t be detected, and the square doesn’t move. So how to resolve it?

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [April 17, 2021, 8:20am UTC](https://discourse.processing.org/t/how-to-resolve-the-delay-after-event-occurs/29440/2 "2021-04-17T08:20:07Z")

</div>

The way I understand your program; You create a division of HTML that checks for the mouse inside.

The issue with your program is that it cannot detect mouse outside of itself. To prevent this issue, you can just set the division location to mouseX - 50, mouseY - 50, without waiting for the mouse to move, regardless of it’s position.

Anyway, that’s how I understand your code. Try this, and if doesn’t work, just try something else : P

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 17, 2021, 8:31am UTC](https://discourse.processing.org/t/how-to-resolve-the-delay-after-event-occurs/29440/3 "2021-04-17T08:31:34Z")

</div>

I think the problem is rather that the mouse can jump over the div - for example the cursor is on the left of the div and next frame it’s on the right because it moved too fast. Maybe you can interpolate mouseX and mouseY between frames.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 17, 2021, 11:14am UTC](https://discourse.processing.org/t/how-to-resolve-the-delay-after-event-occurs/29440/4 "2021-04-17T11:14:26Z")

</div>

maybe I misunderstood the problem. Is this what you want?

1. div is at top left
2. when mouse is inside div, start following mouse
3. continue following mouse

If so, I would make a boolean value `isFollowing = false` to remember if the div is following the mouse or not. Instead of `div.mouseMoved`, I would use a global function `function mouseMoved(){}` to track the mouse (because the former only captures mouse when the mouse cursor is inside div, and the latter will track no matter where on the page). Once the mouse is inside div, set `isFollowing = true`, and as long as it’s true, move the div to `mouseX, mouseY`.