今天项目中的轮播特效用到了setInterval函数,程序写好后,运行正常也是需要的效果。随后将写好代码添加到了window.onload中,再运行程序,控制台抛出异常:Uncaught ReferenceError: showAuto is not defined;还是对setInterval理解不够深刻,开始度娘相关资料,还真是理解不深。附上代码说明。
初始代码:
<script>
var t = n = 0, count;
var showAuto =function() {
n = n >= (count - 1) ? 0 : ++n;
$(".picnum").find("li").eq(n).trigger('click');
}
count = $(".pic").length;
$(".picnum").find("li").click(function () {
n = $(this).index();
if (n >= count) return;
$(".pic").eq(n).fadeIn(800).siblings(".pic").fadeOut(400);
$(this).addClass("on").siblings().removeClass("on");
});
t = setInterval("showAuto()", 4000);
$(".picbox").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });
</script>
写在全局的代码运行正常。
修改后代码:
<script>
window.onload = function(){ //代码修改位置
var t = n = 0, count;
var showAuto =function() {
n = n >= (count - 1) ? 0 : ++n;
$(".picnum").find("li").eq(n).trigger('click');
}
count = $(".pic").length;
$(".picnum").find("li").click(function () {
n = $(this).index();
if (n >= count) return;
$(".pic").eq(n).fadeIn(800).siblings(".pic").fadeOut(400);
$(this).addClass("on").siblings().removeClass("on");
});
t = setInterval("showAuto()", 4000);
$(".picbox").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });
}
</script>
将初始代码添加到window.onload中,抛出异常,Uncaught ReferenceError: showAuto is not defined。
查到的setInterval用法是如下:
1、字符串形式
也就是代码中用到的形式:setInterval("showAuto()",4000);在这种形势下,setInterval在全局环境中执行时,从全局环境中找,而全局环境并没有定义showAuto,且作用域链规定了外部作用域是不能访问内部作用域中的相关函数和变量的,所以会报错。
2、函数形式
就是将代码中setInterval("showAuto()",4000);改为setInterval(showAuto,4000);此时setInterval形成了闭包,window.onload是外部函数,showAuto是该内部函数的局部变量,setInterval在window.onload中调用(此处有些模糊,渴望指点),在全局环境中执行,而闭包规则是:函数定义时的作用域链,在函数执行时依然有效。所以setInterval在全局环境中执行时,由于闭包,仍然可以在作用域链中找到showAuto,保证正常运行。
综上:在使用setInterval时,还是推荐使用第二种形式。对setInterval的使用方法又深入一点,如有不恰当的地方,欢迎指正。
2019.5.17 三年后===============================
有些东西当前看是一个样子,时隔三年虽然有进步,可仍然会有模糊的地方,悟东西可能就是个不能急的过程,依然走在前进的路上就好,哪怕每天前进一点点。