setTimeout使用之由"作用域"引发的血案
2015-10-13 16:57
417 查看
简单描述
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。最近使用它做一个点击频率的控制,遇到一个问题,刨根问底发现罪魁祸首就是作用域的问题。
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>Zero Clipboard Test</title> <script type="text/javascript" src="jquery-1.8.3_min.js"></script> <script type="text/javascript" src="excanvas.compiled.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> <script type="text/javascript"> $(function(){ init(); function generateQRCode(rendermethod, picwidth, picheight, url) { $("#qrcode").qrcode({ render: rendermethod, // 渲染方式有table方式(IE兼容)和canvas方式 width: picwidth, //宽度 height:picheight, //高度 text: utf16to8(url), //内容 typeNumber:-1,//计算模式 correctLevel:2,//二维码纠错级别 background:"#ffffff",//背景颜色 foreground:"#000000" //二维码颜色 }); } function init() { generateQRCode("table",200, 200, "测试"); var margin = ($("#qrcode").height()-$("#codeico").height())/2; $("#codeico").css("margin",margin); $("#qrcode").click(function(){ setTimeout("resetSubmitFlag()",5000); }); } function resetSubmitFlag(){ alert("5000"); } //中文编码格式转换 function utf16to8(str) { var out, i, len, c; out = ""; len = str.length; for (i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; } }); </script> <style type="text/css"> #codeico{ position:fixed;//生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" z-index:9999999; width:30px; height:30px; background:url(./1_meitu_1.png) no-repeat; } </style> </head> <body> <h1>Qrcode</h1> <div id="qrcode"> <div id="codeico"></div> </div> </body> </html>
上述代码中setTimeout的第一个参数传递字符串的这种情况,执行的时候控制台会报如下错误
奇怪的是若把参数直接改为参数名而非上述字符串的形式,就可以正常执行。
setTimeout(resetSubmitFlag,5000);
后经过查阅资料,发现setTimeout() 接受一个字符串参数时,它执行于全局作用域。回头再看上面的代码,发现我的方法全都定义在了下面的大括号之中,导致全局的setTimeout访问不到局部的resetSubmitFlag()方法。
$(function(){ });
解决方案:
将resetSubmitFlag()方法定义在
$(function(){ });
的外面即可。
关于setTimeout()里面的函数带参数的问题可以查看下面的参考文章。
参考文章:
http://bbs.csdn.net/topics/300093263
http://blog.csdn.net/hzrui/article/details/3941137
http://www.jb51.net/article/50844.htm
http://blog.csdn.net/huanglan513/article/details/5669912
http://www.cnblogs.com/chinahnzl/articles/612147.html
http://sjolzy.cn/How-to-use-the-timer-to-pass-parameters-settimeoutsetInterval-a-function-of-the-Executive.html
http://www.cnblogs.com/meihua/articles/1917999.html
http://jishu.admin5.com/hot/140704/2255.html
http://www.poluoluo.com/jzxy/201304/203619.html
相关文章推荐
- JavaScript 学习笔记之变量及其作用域
- 浅谈JavaScript中setInterval和setTimeout的使用问题
- 深入理解javascript作用域和闭包
- javascript作用域和闭包使用详解
- setInterval()和setTimeout()的用法和区别示例介绍
- JavaScript基于setTimeout实现计数的方法
- alert中断settimeout计时功能
- 浅谈setTimeout 与 setInterval
- 深入理解Javascript作用域与变量提升
- setTimeout()递归调用不加引号出错的解决方法
- setTimeout()与setInterval()方法区别介绍
- setTimeout内不支持jquery的选择器的解决方案
- 深入理解Javascript中this的作用域
- js超时调用setTimeout和间歇调用setInterval实例分析
- setTimeout的延时为0时多个浏览器的区别
- JavaScript 变量、作用域及内存
- javascript setTimeout和setInterval计时的区别详解
- Javascript学习笔记之函数篇(六) : 作用域与命名空间
- 定时器(setTimeout/setInterval)调用带参函数失效解决方法
- 关于setInterval、setTimeout在jQuery中的使用注意事项