暂停JavaScript函数onclick
Pause JavaScript function onclick
嗨,我是JavaScript和AJAX的新手。
这个页面的想法是,当用户点击地图中图像的适当区域时,当'field_X'中的条目为'0'时,它调用JavaScript函数myFunction1 -这个函数然后通过AJAX将'field_X'更新为'1' ('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>
你不能暂停JS的执行,不是真的…有一些hack的方法可以做到这一点,但它们会产生糟糕的代码,所以学习它们真的没有意义。正如一些人在评论中建议的那样,我会使用全局(或者更好:闭包)变量。以下是我将在您的案例中使用的基本设置:
//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-browser的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比较陌生,我想你可能想要阅读一下…这是值得的!
相关文章:
- onclick函数需要双击,因为类分配延迟
- Javascript onclick函数会立即调用(而不是在单击时调用)
- jquery Onclick函数带有导致双击的回调排序函数
- 使用element简化onclick函数
- 在React中,为什么我必须绑定onClick函数而不是调用它
- 如何从onclick函数设置全局变量并将其传递给另一个JS文件
- 在onclick函数中传递多个参数
- 如何将onclick函数更改为具有多个函数
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- 指定一个具有静态值的onclick函数
- Onclick函数更改为所有更改元素的相同函数
- 将php变量传递给onclick函数
- 请帮我完成js中按钮的onclick函数
- .hasClass 在 onclick 函数中不起作用,但删除和添加类函数可以
- Jquery移动转换复选框在Jquery onclick函数()中第二次选中不起作用
- 使用“;这个“;在onclick函数中
- 如何在按Enter键后调用onclick函数
- jQuery onclick 函数:未定义不是一个函数
- 如何在 OnClick 函数中传递字符串参数
- OnClick函数仅在第二次单击时起作用