9 Replies - 563 Views - Last Post: 24 February 2014 - 02:01 AM

#1 tazmith  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 20-February 14

Advice on helping this run smoother

Posted 20 February 2014 - 01:13 PM

I've got these 2 functions, and I'm wondering if anyone could give me some advice on it, or help me with a better option. Basically i'm running into a problem with the page it glitches out a lot..

The functions are for an RPG game world (map) Basically a user can move north, south, east and west, however; after about 3 moves, the script glitches out, and freezes for a minute and than either you need to refresh the page, or just wait it out until it allows you to move again.

The movements are based off the "WASD" keys, thats how you navigate north, south, east and west.

If anyone could help me with this, that'd be awesome, thanks.

function move(direction) 
{
    var ajaxRequest; 

    try 
    {
        //Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } 
    catch (e) 
    {
        //Internet Explorer Browsers
        try 
        {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) 
        {
            try 
            {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) 
            {
                alert("Your browser broke!");
                return false;
            }
        }
    }

    //function that will recieve data sent to the server.
    ajaxRequest.onreadystatechange = function() 
    {
        if (ajaxRequest.readyState == 4) 
        {
        }
    }
    ajaxRequest.open("GET", "move.php?direction=" + direction, true);
    ajaxRequest.send(null);
    setTimeout("create()", 30);
}

function create() 
{
    var ajaxRequest; 

    try 
    {
        //Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } 
    catch (e) 
    {
        //Internet Explorer Browsers
        try 
        {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) 
        {
            try 
            {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) 
            {
                alert("Your browser broke!");
                return false;
            }
        }
    }

    //function that will recieve data sent to the server.
    ajaxRequest.onreadystatechange = function() 
    {
        if (ajaxRequest.readyState == 4) 
        {
            document.getElementById("create").innerHTML = ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("GET", "create.php?ajax=1", true);
    ajaxRequest.send(null);
}



Is This A Good Question/Topic? 0
  • +

Replies To: Advice on helping this run smoother

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 325
  • View blog
  • Posts: 1,198
  • Joined: 15-January 14

Re: Advice on helping this run smoother

Posted 20 February 2014 - 01:45 PM

You are clobbering the browser with ajax requests. I don't know how often you call that move function, but if that is sending one ajax request and then another one gets sent 30 milliseconds later, that is going to add up quickly. Each request has overhead, both in the transfer and the work done on the server. When ajax requests are concerned I consider 2 seconds between requests to be "real time", trying to do anything more than that and you're going to kill someone's browser.

The delay you are seeing is the browser waiting for requests to finish before it can send more. The browser has a limit on how many concurrent requests it will have open to a server.

This post has been edited by ArtificialSoldier: 20 February 2014 - 01:46 PM

Was This Post Helpful? 0
  • +
  • -

#3 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1138
  • View blog
  • Posts: 7,105
  • Joined: 07-September 06

Re: Advice on helping this run smoother

Posted 20 February 2014 - 01:51 PM

Part of the problem is that you are constantly opening new ajax requests with the server. This may seem like it should be okay, but browsers (due to security reasons) allow for a maximum of 2 ajax requests to be going at the same time -- you are opening 2 at almost the exact same time. If one of those requests takes a little longer to get completed than the other then you are likely going to start having a larger and larger queue of ajax requests attempting to be called and disregarded because the browser doesn't allow that many.

I would suggest the following:
First, put the ajax creation in an external function. That will cut down your code considerably.
Second, look into websockets. That will allow you to open a persistent socket connection with your server and as a result you won't have to open one after another.
If websockets aren't an option I'd suggest in looking into combining your requests so you only have 1 new ajax request going out at a time (instead of the 2 you currently have). You should also make sure that your PHP is as fast as possible and only sending back the data that it absolutely needs to. The quicker the scripts can run and the smaller the amount of data going back and forth the better overall.
Was This Post Helpful? 0
  • +
  • -

#4 tazmith  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 20-February 14

Re: Advice on helping this run smoother

Posted 20 February 2014 - 02:00 PM

View PostArtificialSoldier, on 20 February 2014 - 01:45 PM, said:

You are clobbering the browser with ajax requests. I don't know how often you call that move function



document.onkeyup = KeyCheck;
function KeyCheck(e) {
    if (!document.getElementById('bpWin_content')) {
        var KeyID = (window.event) ? event.keyCode : e.keyCode;
    }


    switch (KeyID) {
        case 67:
            closeWindow('aWin');
            break;
        case 87:
            move('up');
            closeWindow('aWin');
            break;
        case 65:
            move('left');
            closeWindow('aWin');
            break;
        case 83:
            move('down');
            closeWindow('aWin');
            break;
        case 68:
            move('right');
            closeWindow('aWin');
            break;
    }
}



I call it when a user presses W,A,S,D keys, activating the page which moves them.
Was This Post Helpful? 0
  • +
  • -

#5 tazmith  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 20-February 14

Re: Advice on helping this run smoother

Posted 20 February 2014 - 11:26 PM

would this be any different?

    function getRequest(page, callback) {
    if(!callback)
    callback = function() {};
    var ajaxRequest;
    try {
    ajaxRequest = new XMLHttpRequest();
    }catch(e) {
    try {
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e) {
    try {
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e) {
    alert("Your browser doesn't support ajax");
    return false;
    }
    }
    }
    ajaxRequest.onreadystatechange = function() {
    if(ajaxRequest.readyState == 4)
    return callback();
    }
    ajaxRequest.open("GET", page, true);
    ajaxRequest.send(null);
    }
     
    function move(direction) {
    getRequest("move.php?direction="+direction, function() {
    clearatk();
    create();
    getmob();
    getname();
    });
    }
     
    function create() {
    getRequest("create.php?ajax=1", function() {
    document.getElementById("create").innerHTML = "";
    document.getElementById("create").innerHTML = ajaxRequest.responseText;
    });
    }


Was This Post Helpful? 0
  • +
  • -

#6 ge∅  Icon User is offline

  • D.I.C Regular

Reputation: 58
  • View blog
  • Posts: 424
  • Joined: 21-November 13

Re: Advice on helping this run smoother

Posted 21 February 2014 - 09:55 AM

You don't need so many try/catch.

try/catch is useful when the only way to know if something will work is to actually try it. XMLHttpRequest is a global variable so you can write the statement `if(XMLHttpRequest)`

I don't think you are supporting Internet Explorer 6. The following will do

function request(page, callback){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (xhr.readyState==4 && xhr.status==200 && callback){
            callback(xhr.responseText);
        }
    };
    xhr.open("GET", page, true);
    xhr.send(null);
}


This post has been edited by ge∅: 21 February 2014 - 10:00 AM

Was This Post Helpful? 0
  • +
  • -

#7 ge∅  Icon User is offline

  • D.I.C Regular

Reputation: 58
  • View blog
  • Posts: 424
  • Joined: 21-November 13

Re: Advice on helping this run smoother

Posted 21 February 2014 - 10:17 AM

You don't even need the readystatechange event actually, if you just send data.

Another thing, like betaWar said, is to combine requests : you should do one request to a PHP script that calls create.php and move.php and give them the correct inputs on the server side.

I don't think the requests are the cause of your problem though. Ajax is asynchronous.

What do the clearatk, getmob and getname functions do ?
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3214
  • View blog
  • Posts: 10,777
  • Joined: 12-December 12

Re: Advice on helping this run smoother

Posted 21 February 2014 - 10:33 AM

This is pure speculation as I have no idea what the map might look like, but I would guess that, typically, more of the map (or map details) than is visible could be downloaded initially, and further map details only requested as the user moves to the edges of the current map.

Doing it this way a lot of the processing can be done more effectively on the client-side.

But, again, I am speculating ;)
Was This Post Helpful? 0
  • +
  • -

#9 tazmith  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 20-February 14

Re: Advice on helping this run smoother

Posted 21 February 2014 - 07:27 PM

Actually, its a full image. But the whole image but i don't show the whole image all at once, I only use 200x200 image size.

So the image is 1, and ontop of the image, the red dot is there. the red dot is the actual movement. Right now If i hit the "S" key, it would move 1 frame down. That is what triggers the move. The create function is what creates the actual map (and the red dot) So move triggers the actual move of the red dot.

Posted Image
Was This Post Helpful? 0
  • +
  • -

#10 ge∅  Icon User is offline

  • D.I.C Regular

Reputation: 58
  • View blog
  • Posts: 424
  • Joined: 21-November 13

Re: Advice on helping this run smoother

Posted 24 February 2014 - 02:01 AM

You talk about 3 moves. Is the problem the same when you wait a while between moves ?

My guess is that you have a recursive function, loop or timer, that is called every time you move and that never stops, so you would add more and more timers/loops every time you press a key, slowing things down.

Can we see your rendering function and how it is updated ?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1