JavaScript异步执行的注意事项
今天被JavaScript的异步执行坑了一把。
情况是这样的，我要接入云片网的短信接口。此平台为了防止自己的客户被短信轰炸机利用，要求客户在发送验证码之前必须要求验证码验证。于是我写了个先验证验证码然后才能点击“发送短信”按钮的程序。
用户输入验证码之后，点击按钮，手机收到验证码。图片验证码的输入检测是这样的：一旦焦点离开input，就发送ajax到后台验证是否正确：
验证码验证JavaScript
| 代码如下 | |
| //图片验证码失去焦点验证 $("#captcha_input").blur(validate_code); | |
然后发现问题了：如果访客在输入验证码之后直接点击“发送按钮”。那么，焦点就直接从input离开，然后触发了按钮事件，并不会触发ajax去后台验证（正常的流程应该是点击空白区域失去焦点，验证通过，然后再点击按钮）。
于是我的做法是，按钮点击之后，先验证验证码一次，然后再触发发送短信
发送验证码按钮JavaScript
| 代码如下 | |
| $("#btn-phone-code").click(function () { validate_code(); if (code_is_validate) { alert("已发送"); getCode(); code_is_validate = false; $("#btn-phone-code").attr("disabled", true); } else { alert("请先填写图片验证码的计算结果,再发送短信验证码至您的手机上."); } }); | |
然而，结果依然是不会验证，仿佛验证验证码的代码没有执行。我在验证码的函数中打印出调试信息，却显示的确执行了。
最后发现，原来是因为“异步执行”。
在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，”异步模式”甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。
所以说，ajax的代码是异步执行的。在执行“验证码函数”的时候，点击按钮事件函数依然继续执行。到快执行完的时候，ajax这边也得到服务器的回复了，通过了验证。然而按钮事件却以“验证码未通过”执行完了函数。
现在我才知道这个“异步执行”是什么意思了。函数为了不阻塞，把剩下的事情教给callback函数来做，自己继续做剩下的事情。这个“同步执行”的编程很不一样，无法控制他们先做完这个、再做这个。但是无疑这提高了浏览器的响应能力。
