0

嗨，我是 JavaScript 和 AJAX 的新手。

此页面的想法是，当用户单击地图中图像中的适当区域时，当“field_X”中的条目为“0”时，它会调用 JavaScript 函数myFunction1 - 然后此函数将“field_X”更新为“1”通过 AJAX（“field_X”以“0”条目开头）。

然后，当用户下一次单击地图中的同一区域时，调用myFunction2，因为“field_X”中的条目现在为“1” - 然后将“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 的执行，不是真的......有一些 hacky 方法可以做到这一点，但它们会产生糟糕的代码，所以学习它们真的没有意义。正如评论中的一些人所建议的那样，我会使用全局（甚至更好：闭包）变量。这是我将在您的情况下使用的基本设置：

//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 回答