您好,我是 JavaScript 和 AJAX 新手。
此页面的想法是,当用户单击 map 中图像中的适当区域时,当“field_X”中的条目为“0”时,它会调用 JavaScript 函数 myFunction1 - 此函数然后通过 AJAX 将“field_X”更新为“1”(“field_X”以“0”条目开头)。
然后,当用户下次单击 map 中的同一区域时,myFunction2 会被调用,因为“field_X”中的条目现在为“1” - 然后会将“field_X”更新为“2” .
等等...
当单独调用适当的函数时,AJAX 调用工作正常并正确更新“field_X”。
但是问题是(使用我拥有的代码)当用户单击 map 时,所有 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>
最佳答案
你不能暂停 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
可能会导致内存泄漏,which are quite easy to avoid如果您了解事件委托(delegate)和关闭的工作方式。由于您对 JS 比较陌生,我怀疑您可能想阅读相关内容...这是非常值得的!
关于php - 暂停 JavaScript 函数 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15825578/