.then(function) doesn't run function

Question

I have this userscript for GreaseMonkey. I created a function (A) which calls an other function (B). I want to wait running the A function further and wait for the B function to return. Function B contains a button, so in fact I want A to wait for the button press.

I tried this with the async and await but that didn't work for me show I now tried to use the .then() option. In the then() I created a function (nextI) to increase the i after running function B.

function A(){
    var i = 0
    while (i < 3){
        var data = jsonResponse[i];
        var x = data.x;
        var y = data.y;
        B(x, y).then(
            nextI(i)
        )
    }
)

function B(x, y){
    // do some stuff
    let button = document.getElementById("button");
    button.addEventListener("click", () => {
        console.log("Button clicked.");
        return
   });
}

function nextI(i){
    return i + 1
}

So I want to pause A until script B is done and I clicked the button.

`B()` does not return a promise. It actually doesn't return anything — Taplar, Jan 03 '19 at 17:12
If `B()` returns the increased `i`, would that solve the problem? — George, Jan 03 '19 at 17:15
https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323 I think you need a promise — sferret, Jan 03 '19 at 17:15
Which is it? Do you want to wait for `B` to return or for the button to be pressed? Those are very different things. — melpomene, Jan 03 '19 at 17:17
@George You can return a `Promise` from `B` and resolve it from within your event listener callback. — creativecreatorormaybenot, Jan 03 '19 at 17:18
`while (i < 3)` creates infinity loop, because `i` is never increased — ponury-kostek, Jan 03 '19 at 17:19

score 1 · Answer 1 · answered Jan 03 '19 at 17:24

1. `Number` is passed by value

Thus, giving i to nextI increases a local copy (i.e. the input parameter).

2. `B` doesn't return `Promise`

function B(x, y) {
  let button = document.getElementById("button");

  // FIX HERE
  return new Promise(resolve =>
    button.addEventListener("click", () => {
      console.log("Button clicked.");
      resolve('some data')
    })
  )
}

3. `Promise#then` accepts a function

So, B (nextI (i)) isn't correct, but B(() => nextI (i)).

N. Other issues

There should be other issues there. For example, you're running functions whose return type/value is Promise in a fire&forget way. Take a look at Promise.all or Promise.race.

Vinay Sheoran · Answer 2 · 2019-01-03T17:26:22.563

0

before using .then(), you first have to return a promise.

function B(x, y){
  return new Promise((resolve, reject) => { 
     // do something here

     let button = document.getElementById("button"); 
     button.addEventListener("click", () => { 
          console.log("Button clicked."); 
          resolve('foo');
     });

  });
}

take a look https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

edited Jan 03 '19 at 17:26

answered Jan 03 '19 at 17:18

Vinay Sheoran

528
3
15

They want to return data from within the `click` callback and it might be necessary to explain how to do that. – creativecreatorormaybenot Jan 03 '19 at 17:19
1

they can use in the promise --- `let button = document.getElementById("button"); button.addEventListener("click", () => { console.log("Button clicked."); resolve('foo'); });` – Vinay Sheoran Jan 03 '19 at 17:21
we are resolving promise when the button is clicked, so `.then()` will be executed after the button is clicked. – Vinay Sheoran Jan 03 '19 at 17:22

.then(function) doesn't run function

2 Answers2

1. Number is passed by value

2. B doesn't return Promise

3. Promise#then accepts a function

N. Other issues

1. `Number` is passed by value

2. `B` doesn't return `Promise`

3. `Promise#then` accepts a function