JavaScript异步执行的坑

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

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

ifenglv-loginpage

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

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

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

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


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

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

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

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

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


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

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

 

Leave a comment

电子邮件地址不会被公开。 必填项已用*标注