Page method multiple callbacks

Question

I'm calling a page method on mouse over of an image slider to show an image from a database. The problem is I'm getting multiple callbacks. Does anyone know how to resolve this issue?

Code which I'm using for the page method:

var contextArray = "img";
pageMethodConcept = {
    callServerSideMethod: function (id) {
        PageMethods.GetItemLargeImage(id, pageMethodConcept.callback, pageMethodConcept.Failcallback, contextArray);

    }, callback: function (result, userContext, imagePreview) {
        //alert(result);
        if (userContext = "img") {
           //replace img source with result
            document.getElementById("displayPreviewImage").src = result;

            return false;
        }
    }, Failcallback: function (result, userContext) {
        alert("failed");
    }
}

Code for setting the timer:

var alertTimer = 0;

if (alertTimer == 100) {
    alert("time 100");
    alertTimer = setTimeout(pageMethodConcept.callServerSideMethod(this.id), 0);

}
else {
    alertTimer = setTimeout(pageMethodConcept.callServerSideMethod(this.id), 100);
    alert("time ");
}

Answer 1

What do you think the timer code is doing exactly?

if (alertTimer == 100) {...

100? What is 100?

setTimeout and clearTimeout

You should be doing something like:

if (alertTimer != 0) {
    /* timeout pending */
    clearTimeout(alertTimer);
    alertTimer = ...
} else {
    /* set timeout */
    alertTimer = ...
}