为什么if(Timer)的时候就会执行下面的脚本;这个判断到底是什么原理?

为什么if(Timer)的时候就会执行下面的脚本;这个判断到底是什么原理?

//封装一个代替 getElementById()的方法

function byId(id){

return typeof(id) === "string"?document.getElementById(id):id;

}

console.log(byId("main"));//如果是字符串就提取出来;如果不是字符串就返回该值


//鼠标滑过图片 自动轮播停止;离开重新开始


// 全局变量

var index=0,

timer=null,

pics=byId("banner").getElementsByTagName("div"),

len=pics.length;

console.log(len);


function slideImg(){

//先取出 main 这个盒子

var main=byId("main");

//滑过清除定时器,离开继续

main.onmouseover=function(){

//滑上时清除定时器

if(timer){//判断如果timer在执行;那么就执行下面的脚本

clearInterval(timer);

}

}

main.onmouseout=function(){

//鼠标移出触发

timer=setInterval(function(){

index++;  //len=3 0 1 2

if(index>=len){

index=0;

}

console.log(index);

//切换图片

changeImg();//调用changeImg()的函数;切换效果

},3000);//间歇调用;3秒调用一次

}

//调用函数;直接触发移出的函数

main.onmouseout();

}

function changeImg(){

//要使用className就要所有的calss因为会重写 删掉之前的 

//遍历banner下所有的div,将其隐藏

for(i=0;i<len;i++){

pics[i].style.display="none";

}

pics[index].style.display="block";

}

slideImg()


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

7回答
小丸子爱吃菜 2017-07-17 18:39:57

这么写是比较严谨的写法,这样写是为了防止代码写的多了以后,别的地方会影响到这,这也是老师写代码的习惯,是比较好的,在此处练习你不写也是可以的,这个写法等你以后学的代码多了,就明白这个作用了。

慕粉4425681 2017-07-17 11:50:48

提问的同学他的疑问是,为什么要用if来判断,并不是说if运行的原理,感觉大家都没有解释清楚啊。我也试过了,不用if,直接

main.onmouseover=function(){
            clearInterval(timer);
        }

也是可以达到效果的。

所以我也有疑问了,那既然这样为什么还需要用if呢。

小丸子爱吃菜 2017-05-17 18:04:04

当鼠标放上去时轮播就已经停止了,但是鼠标有可能开会移动,这样鼠标每移动一次我们就要清除一次定时器,但是定时器早就已经停止了,所以我们不需要一直去执行这条语句,只要进行判断就可以了,只要是false就不往下执行了。

Sun601 2017-05-17 12:49:50

我明白了一点。

首先明确一点,setInterval()这个方法一旦执行,就会有一个返回值(这个返回值我不清楚是固定的1还是ID),通过timer = setInterval()赋值给了 timer。 而timer初始赋值为null,其布尔值为false。那么再来看清除定时器的语句

if (timer) clearInterval(timer);

如果 timer 的值为真,则执行 后面clearInterval方法。其实就是说:网页一打开,轮播图就开始自己换了,timer就已经不是null了,值肯定为真,就会执行后面的方法。


但是还有一点不明白,为什么 一定要用IF语句判断一下呢?我鼠标移上去,就直接清除计时不可以么?效果上是一样的,求解答。

小丸子爱吃菜 2017-05-16 18:12:51

timer的初始值是null,那么if(timer)去判断的时候,就是false,说明定时器没有再运行,那么就不会执行后面的清除定时器语句;

如果timer定值器在运行,那么if(timer)去判断的时候,就是true,那么我们就要去清除定时器了。

祝学习愉快!

Sun601 2017-05-16 17:25:33

解释没有看明白。

  • 这么想,如果页面一开始没调用main.onmouseout();方法,那么此时timer是不是null?既然timer = null,那么clearInterval(null)是不是没意义?
    2017-05-26 00:12:54
晚小鱼 2017-05-07 18:16:08

代码执行的时候,javascript会根据需要会自动进行数据类型转换,但是在转换是也遵循一定的规则。

题中setInterval返回值是1,在if中转化为ture。若是null,转化为false。

因为一开始触发移动函数,执行了setInterval,timer就被接收setInterval的返回值1,然后转为ture,为真然后就执行if语句。


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师