Settimout does'nt set timeout

JavaScript
1 
var spostamentoNave=function(m,q){
  let  xs = xp;
  let ys = yp;
  if (ys<0)
  ys*=-1;
  if (xs<0)
  xs*=-1;
  //console.log(x, y);
  let astroInt = setInterval(() => {
    ys = xs * m + q;
    
    if(xp>xa)
      xs = xs - 1;
    else
      xs = xs + 1;

      $("#startingP").css("position", 'absolute');
      $("#startingP").css("left", x+'px');
      $("#startingP").css("top", y+'px');
      console.log("***", xs, ys);
    if (xs === xa)
      clearInterval(astroInt);
  },100);
 }

I’ve implemented this function but timeout is like 0
thanks in advanced

3

Just wondering where xa is coming from?

let  xs = xp;
let ys = yp;

Same question for xp and yp.

Well, 100ms is pretty close to 0, so probably won’t be able to tell the difference. Have you actually verified that it isn’t working?

4

I used 5000 ms it works like a time out xp, xa, yp, ya are global variables…
Do you want to read the program?

here it is:



var placement=function(){
    let coorDiPartenza= $("#startingP").offset();
    x=parseInt(coorDiPartenza.left);
    y=parseInt(coorDiPartenza.top);
    xp=x;
    yp=y;
//    console.log(xp,yp);
 }
 var spostamentoXY=function(event){
    x=parseInt(event.clientX);
    y=parseInt(event.clientY);
    xa=x;
    ya=y;
    //console.log(x,y);

 }
 var coeffAng = function(){
  let test = Math.abs((yp - ya) / (xp - xa));
  if (isNaN(test)) {
    console.log(test, yp-ya, xp-xa)
  } else {
    return test;
  }
} 
 var qfunction=function(){
    m = coeffAng();
    //console.log(m);
    let test= yp - xp * m;
    if(isNaN(test)){
      console.log(test, yp, xp, m)
    }
    else
      return test;


 }
 var spostamentoNave=function(m,q){
  let  xs = xp;
  let ys = yp;
  if (ys<0)
  ys*=-1;
  if (xs<0)
  xs*=-1;
  //console.log(x, y);
  let astroInt = setInterval(() => {
    ys = xs * m + q;
    
    if(xp>xa)
      xs = xs - 1;
    else
      xs = xs + 1;

      $("#startingP").css("position", 'absolute');
      $("#startingP").css("left", x+'px');
      $("#startingP").css("top", y+'px');
      console.log("***", xs, ys);
    if (xs === xa)
      clearInterval(astroInt);
  },100); 
 }
$(document).ready(function(){
    $("body").on("click",function(event){
      let x, y, xp, xa, yp,ya,m, q;
        placement();
        spostamentoXY(event);
        m=coeffAng();
        q=qfunction();
        spostamentoNave(m,q);
        

    });
});
5

So it is working? I might not understand what your original is. Can you explain in a little more detail?

6

Thise code move an object like a straigth (y=x*m+q) from a starting point to a click event point

7

Sorry, I’m still not quite understanding what your issue is.

Also, as @camperextraordinaire pointed out above, you haven’t given us the HTML/CSS so that we can properly test this.

8 
<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Il tuo titolo qui</title>

  <!-- Collegamenti ai file CSS di Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="./index.css" rel="stylesheet">

  
  <!-- Collegamenti ai file JavaScript di Bootstrap e jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <!-- Inserimento di script personalizzati (opzionale) -->
</head>

<body>
  <!-- Il tuo contenuto qui -->
  <img class="navi" id="startingP"  src="./Img/nave.png">
</body>
<script src="./index.js"></script>

</html>


body{
    background-image: url(./Img/sfondo.jpg);
    width: 100vw;
    height: 100vh;
    position: relative;
}
.navi{
    width: 7%;
}
9

OK, when I click on the page the image moves to the spot where I clicked. What else is supposed to happen?

Also, the spostamentoNave function makes reference to the following DOM element:

$("#startingP").css("position", 'absolute');
$("#startingP").css("left", x+'px');
$("#startingP").css("top", y+'px');

But I do not see that element in the HTML.

Ahh, my bad, I see it now. I just wasn’t expecting the image to have an id of startingP.

10

Are you sure you want to use x and y here? If so, where are those values changing in your code that would have an effect on them each time the code in setInterval is run?

11 


var placement=function(){
    let coorDiPartenza= $("#startingP").offset();
    x=parseInt(coorDiPartenza.left);
    y=parseInt(coorDiPartenza.top);
    xp=x;
    yp=y;
//    console.log(xp,yp);
 }
 var spostamentoXY=function(event){
    x=parseInt(event.clientX);
    y=parseInt(event.clientY);
    xa=x;
    ya=y;
    //console.log(x,y);

 }
 var coeffAng = function(){
  let test = Math.abs((yp - ya) / (xp - xa));
  if (isNaN(test)) {
    console.log(test, yp-ya, xp-xa)
  } else {
    return test;
  }
} 
 var qfunction=function(){
    m = coeffAng();
    //console.log(m);
    let test= yp - xp * m;
    if(isNaN(test)){
      console.log(test, yp, xp, m)
    }
    else
      return test;


 }
 var spostamentoNave=function(m,q){
  let  xs = xp;
  let ys = yp;
  if (ys<0)
  ys*=-1;
  if (xs<0)
  xs*=-1;
  //console.log(x, y);
  let astroInt = setInterval(() => {
    if (m<0)
      m*=-1;
    ys = Math.abs(xs * m + q);
    ys=Math.floor(ys);
    if(xp>xa)
      xs = xs - 1;
    else
      xs = xs + 1;

      $("#startingP").css("position", 'absolute');
      $("#startingP").css("left", xs+'px');
      $("#startingP").css("top", ys+'px');
      console.log("***", xs, ys);
    if (xs === xa)
      clearInterval(astroInt);
  },1); 
 }
$(document).ready(function(){
    $("body").on("click",function(event){
      let x, y, xp, xa, yp,ya,m, q;
        placement();
        spostamentoXY(event);
        m=coeffAng();
        q=qfunction();
        spostamentoNave(m,q);
        

    });
});

Now is like this but ys sometimes the movment go wrong

12 
$(document).ready(function() {
  $("body").on("click", function(event) {
    const f = document.getElementById("startingP");
    document.addEventListener(
      "click",
      (ev) => {
        f.style.transform = `translateY(${ev.clientY}px)`;
        f.style.transform += `translateX(${ev.clientX}px)`;
      },
      false
    );

  });
});
13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.