与 MySQL 的连接更快？

Question

我有以下问题。 我正在开发一个基于浏览器的小型游戏，并使用键盘键添加了移动。 它正在工作，但现在我想添加一个代码，它将播放器的当前位置发送到 MySQL 数据库。 问题是，当我按下按钮（例如 W）时，我的角色一直向上移动，并且每一步他都会向 MySQL 发送数据，从而创建一个长长的 PHP 请求列表。 我怎样才能加快这个过程？ 这是我使用的部分代码：

if (key == key_W) { // Player Up
if (parseFloat(wzr.style.top)-6 < 0)
{
 $('#wzro').stop().animate({
 top: 342
 }, 0, function() {
 $('#wzro').empty();
 });
YWalk();
}

else
{
 $('#wzro').stop().animate({
 top: '-=6'
 }, 0, function() {
 $('#wzro').empty();
 });
YWalk();
}
}

function YWalk(){
            var wzr = document.getElementById("wzro");
            var xmlHttp;
            if (window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
            }
            else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlHttp.open("GET","datachodzeniey.php?y="+ wzr.style.top);
            xmlHttp.send(null);
}

在 datachodzeniey.php 中：

<?php
session_start();
$username = $_SESSION['username'];
$y=$_GET['y'];

$connect = mysql_connect("localhost", "root", "");
$select_db = mysql_select_db("testdb", $connect);
$q=mysql_query("update players set y='$y' where dispname='$username'");
?>

Answer 1

首先，这是您的代码的整洁版本，没有功能更改：

//in some outer scope
var $wzro = $("#wzro");

//in the key event handler
if (key == key_W) { //Player Up
    var top = parseInt($wzro.css('top')) - 6;
    top = (top < 0) ? 342 : top;
    $wzro.empty().css('top', top);
    $.ajax({ url: "datachodzeniey.php?y=" + top });
}

现在，减少 ajax 调用次数：

//in some outer scope
var $wzro = $("#wzro");
var u = {//u for upload
    url: "datachodzeniey.php?y=",
    allow: true,
    reallow: function(){ u.allow = true; },
    delay: 100//(milliseconds) adjust as necessary
};

//in the key event handler
if (key == key_W) { //Player Up
    var top = parseInt($wzro.css('top')) - 6;
    top = (top < 0) ? 342 : top;
    $wzro.empty().css('top', top);
    if(u.allow) {
        $.ajax({ url: u.url + top });
        u.allow = false;
        setTimeout(u.reallow, u.delay);
    }
}

@JaspalSingh 的 memcache 想法听起来不错，可以独立于上面的代码实现。

Answer 2

这是两个请求之间间隔 20 秒的实现：

            var nowTime = new Date(); 
            var lastExecuted= new Date();

            if (key == key_W) { // Player Up
                nowTime = new Date();
                if (parseFloat(wzr.style.top)-6 < 0)
                {
                    $('#wzro').stop().animate({
                        top: 342
                    }, 0, function() {
                        $('#wzro').empty();
                    });

                } else {
                    $('#wzro').stop().animate({
                        top: '-=6'
                    }, 0, function() {
                        $('#wzro').empty();
                    });
                }
                //time interval in  milliseconds - here i have set it to 20seconds
                if (nowTime - lastExecuted >= 20000) {
                    YWalk();
                }
            }

            function YWalk(){
                lastExecuted = new Date();
                var wzr = document.getElementById("wzro");
                var xmlHttp;
                if (window.XMLHttpRequest){
                    xmlHttp=new XMLHttpRequest();
                }
                else{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlHttp.open("GET","datachodzeniey.php?y="+ wzr.style.top);
                xmlHttp.send(null);
            }