JavaScript 'function invoked' event listener

Question

function addAndRemove() {
    if (mapData.initialZoom && !cameraStatus.locked) {
        cameraStatus.locked = true;
        var ajaxRequest = null;


        var abortMission = setTimeout(function () {

            /* Here is where I need the event listener.
             * If the function is called again then we need to
             * cancel our existing ajax request */

            if (ajaxRequest) {
                ajaxRequest.abort();
                updatePrompt({text: "Cancelled ajax"});
            }

            cameraStatus.locked = false;
        }, 1000);
    }
}

As I have stated in a comment in the code I need to be able to listen out to see if addAndRemove is called again whilst in execution. I only want to cancel the existing Ajax request if a new one has been requested. How can I do this?

Are you willing to use libraries such as underscore?

Scimonster
– Scimonster

2014-06-10 10:09:40 +00:00
Commented Jun 10, 2014 at 10:09 — Scimonster
– Scimonster, Commented Jun 10, 2014 at 10:09
@Scimonster No, sorry

jskidd3
– jskidd3

2014-06-10 10:11:14 +00:00
Commented Jun 10, 2014 at 10:11 — jskidd3
– jskidd3, Commented Jun 10, 2014 at 10:11

mpm · Accepted Answer · 2014-06-10 10:10:21Z

3

You need to use a closure to create a state in your function.

You could refactor your function this way.

var addAndRemove = (function(){
  var ajaxRequest = null; // --> move ajaxRequest variable here
  return function () {
    if (mapData.initialZoom && !cameraStatus.locked) {
        cameraStatus.locked = true;

        var abortMission = setTimeout(function () {

            /* Here is where I need the event listener.
             * If the function is called again then we need to
             * cancel our existing ajax request */

            if (ajaxRequest) {
                ajaxRequest.abort();
                updatePrompt({text: "Cancelled ajax"});
            }

            cameraStatus.locked = false;
        }, 1000);
    }
  }
}());

that way ajaxRequest will point to the same reference no matter how much time your function is called.

answered Jun 10, 2014 at 10:10

mpm

20.2k7 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jskidd3 Over a year ago

So if the Ajax request is the same reference it means it will cancel itself and re-use it, right? I think what you have answered is what I need to do I'm just not sure I fully understand it

mpm Over a year ago

Hmm, it means you'll be able to cancel ajaxRequest with the abort method,then you can reassign ajaxRequest to whatever you want provided you dont use undefined or var to do it in the inner function.The question is how do you intend to listen for ajax result? you can pass a function to addAndRemove as an argument for that(it will be the callback).

jskidd3 Over a year ago

In my full code I have .done etc and it is handled already. I'll give this a go and experiment, thanks :)

jskidd3 Over a year ago

You see where my comment is under the abortMission declaration, do I need anything there? Currently ajaxRequest.abort() is always being called even if the function hasn't been invoked again (because of the timeout). I only want to execute ajaxRequest.abort() if the function is called whilst it is in execution. Do I need to change how I call the addAndRemove function?

Collectives™ on Stack Overflow

JavaScript 'function invoked' event listener

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related