0

こんにちは、JavaScript と AJAX は初めてです。

このページのアイデアは、ユーザーがマップ内の画像の適切な領域をクリックすると、'field_X' のエントリが '0' の場合に JavaScript 関数myFunction1が呼び出されるというものです。この関数は、'field_X' を '1' に更新します。 AJAX 経由 (「field_X」は「0」エントリで始まります)。

次に、ユーザーがマップ内の同じ領域をクリックすると、「field_X」のエントリが「1」になったためmyFunction2が呼び出され、「field_X」が「2」に更新されます。

等々...

AJAX 呼び出しは正常に機能し、適切な関数が個別に呼び出されると、「field_X」が正しく更新されます。

ただし、問題は(私が持っているコードでは)ユーザーがマップをクリックすると、3つの関数すべてがすぐに連続して呼び出されることです(「field_X」は「3」になります)。関数間でこれを一時停止し、ユーザーによる次のクリックを待つ方法がわかりません。

関数は他のことも行うので、関数内のコードをできる限り省略しました。どんな助けでも大歓迎です。

PHP ユーザーページ

<?php function request_data(){select field_X from TABLE_X; }  
$q = request_data(); ?>  

<map>  
<area onclick= <?php    
    if ($q == '0') {?>"myFunction1();" <?php }  
    if ($q == '1') {?>"myFunction2();" <?php }  
    if ($q == '2') {?>"myFunction3();" <?php }   
    if ($q == '3') { ...and so on... }   
?> />  
</map>

JavaScript ページ

<script>   
//JavaScript  
function myFunction1() { update_1(); }  
function myFunction2() { update_2(); }  
function myFunction3() { update_3(); }  

//AJAX - abbreviated  
function update_1(){ update TABLE_X set field_X = (1); }  
function update_2(){ update TABLE_X set field_X = (2); }  
function update_3(){ update TABLE_X set field_X = (3); }  
</script>
4

1 に答える 1

2

JS の実行を一時停止することはできません。実際にはそうではありません...ハックな方法もありますが、ひどいコードになるため、学習する意味がありません。コメントの一部で示唆されているように、グローバル（またはさらに良い：クロージャー）変数を使用します。あなたの場合に使用する基本的なセットアップは次のとおりです。

//server side, instead of echoing function1() etc...
echo 'var funcNumber = ';
switch($q)
{
    case 0: echo 1; break;
    case 1: echo 2; break;
    //and so on
}
echo ';';
//or better yet
echo 'var funcNumber  = '.($q + 1).';';

次に、JSで

//var funcNmber = 1; ===> makes it a global var, which is not recommended
window.onload = function()
{
    var funcNmber = 1;//echo here if possible
    var handler = function(e)
    {//assign to var, you'll see why
        var ajax = nex XMLHttpRequest(),
        that = this, //this points to the clicked element, reference it by var that
        queryString = 'field=' + funcNumber;
        //your basic setup
        //followed by this piece of magic:
        this.onclick = null;//unbind handler
        ajax.onreadystatechange = function()
        {
            if (this.readyState === 4 && this.status === 200)
            {//call complete
                funcNumber++;//increment
                that.onclick = handler;//rebind event handler, that's why we named it
            }
        };
    };
    document.getElementById('areaId').onclick = handler;//bind handler
};

もちろん、このコードにはまだ多くの作業が必要です。X ブラウザー XHTTP オブジェクトが必要な場合は、次のようになります。

var getXHR = function()
{
    try
    {
        return new XMLHttpRequest();
    }
    catch (error)
    {
        try
        {
            return new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(error)
        {
            try
            {
                return new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(error)
            {
                throw new Error('no Ajax support?');
            }
        }
    }
};

また、私たちは X ブラウザのものを使用しているためwindow.onload、メモリ リークが発生する可能性があることに注意してください。これは、イベントの委譲とクロージャの仕組みを理解していれば、非常に簡単に回避できます。あなたは JS に比較的慣れていないので、それについて読みたいと思うかもしれません...それだけの価値があります!

于 2013-04-05T07:55:52.003 に答える