JavaScript异步执行的坑

今天被JavaScript的异步执行坑了一把。

情况是这样的，我要接入云片网的短信接口。此平台为了防止自己的客户被短信轰炸机利用，要求客户在发送验证码之前必须要求验证码验证。于是我写了个先验证验证码然后才能点击“发送短信”按钮的程序。

用户输入验证码之后，点击按钮，手机收到验证码。图片验证码的输入检测是这样的：一旦焦点离开input，就发送ajax到后台验证是否正确：

然后发现问题了：如果访客在输入验证码之后直接点击“发送按钮”。那么，焦点就直接从input离开，然后触发了按钮事件，并不会触发ajax去后台验证（正常的流程应该是点击空白区域失去焦点，验证通过，然后再点击按钮）。

于是我的做法是，按钮点击之后，先验证验证码一次，然后再触发发送短信

然而，结果依然是不会验证，仿佛验证验证码的代码没有执行。我在验证码的函数中打印出调试信息，却显示的确执行了。

---

最后发现，原来是因为“异步执行”。

在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，”异步模式”甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

所以说，ajax的代码是异步执行的。在执行“验证码函数”的时候，点击按钮事件函数依然继续执行。到快执行完的时候，ajax这边也得到服务器的回复了，通过了验证。然而按钮事件却以“验证码未通过”执行完了函数。

现在我才知道这个“异步执行”是什么意思了。函数为了不阻塞，把剩下的事情教给callback函数来做，自己继续做剩下的事情。这个“同步执行”的编程很不一样，无法控制他们先做完这个、再做这个。但是无疑这提高了浏览器的响应能力。

参考：Javascript异步编程的4种方法

---

170113更新：最近又被坑到了，还是要怪自己不注意啊。

开发的过程中遇到一个bug，困扰了好久，有一个日历，需要根据issue显示日历中每一天的事件，现象是有的时候显示得出来，有时候显示不出来。仔细研究了一下，发现原来有两个地方有ajax调用，两个ajax收到结果之后都会更新同一个变量，其中一次更新是对的，一次是错的。如果错的比快的慢，那么后返回的错误的结果就会覆盖正确的……，改掉就好了。

 

---