已知：

　　1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:timerID

　　1.2 关闭Timeout程序: scope.clearTimeout(timerID);

　　

　　2.1 开启Interval程序: scope.setInterval("functionName()" | functionHandle, timeValue)  返回值:timerID

　　2.2 关闭Interval程序: scope.clearInterval(timerID);

一、背景

　　在替实验室小伙伴解决问题过程中，出现了这样一个问题：

　　　　她用网页做了一个轮播图，利用不断地轮询setTimeout + 切换被轮播图片的css属性opacity:0/1来达到轮播效果；

　　　　当网页加载后，图片轮播自动执行;当用户鼠标移动到图片轮播区域上时，立即停止轮播(即 清除 setTimeout定时器)，而不是继续轮播图片(使用户看不到想看的图片内容，提高用户体验);

　　　　然而，在全局域中，使用clearTimeout()方法可以实现，但在鼠标触发事件的函数内部调用，却失败，百思不得其解！(这个问题，实际上本文并没有解决！)

　　　　为了解决这个需求，我模拟了这一个过程，并对setTimeout轮询方法与图片轮播的方法进行解耦(分离成为两个函数)，然后在封装的轮询定时器Timer中依次调用图片轮播方法和setTimeout方法，同时在轮询过程中，总是记录最近(最后)一次setTimeout方法返回的timerID值，这一点很重要；

　　　　最后：当鼠标滑过目标区域时，通过记录的最后一次timerID和clearTimeeout值来关闭图片轮播整个轮询。

　　　　【原理：即关闭最后一次(也是程序执行的最近一次)循环的timeID，使循环停止】

二、源码

　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>demo setTimeout & clearTimeout</title>

</head>

<body>

    <ul>

        <li><a href="#"><input type="number" value="0"></a></li>

        <li><a href="#"><input type="number" value="1"></a></li>

    </ul>

    <script type="text/javascript">

        var aNodes = document.getElementsByTagName("a");

        var inputNodes = document.getElementsByTagName("input");

        //console.log('test:aNodes ' + aNodes.length);

        var changeNum =  function(){

            inputNodes[0].value = parseInt(inputNodes[0].value) + 1;

        };

        var a1_timeoutId;

        var timeIds = -1;

        var changeNumByTimer = function(){

            // a1_timeoutId = setTimeout(function(){

            changeNum();

            var timeKey = setTimeout("changeNumByTimer()",1000);

            timeIds = timeKey;

            console.log('test:当前的timeID：' + timeKey);

            // timeIds.push(timeKey);

            // setTimeout(changeNum,1000);

            // },1000);

        }

        changeNumByTimer();

        //当鼠标滑过

        aNodes[0].onmouseover = function(){

            console.log('test:aNodes[0].onmouseover:' + "鼠标滑过a链接[0]");

            console.log('test:aNodes[0].onmouseover: timeIds '  + timeIds);

            // for(var i = 0; i < timeIds.length; i++){

            //     // clearTimeout(timeIds[i]);

            //     // console.log('test: 已经关闭了 timeID：' + timeIds[i]);

            //      //clearTimeout(timeIds[timeIds.length-1]);

            //      //console.log('test: 已经关闭了 timeID：' + timeIds[timeIds.length-1]);

            // }

            clearTimeout(timeIds);

            console.log('test: 已经关闭了 timeID：' + timeIds);

        }

    </script>

</body>

</html>

三、效果

　　

　　

四、总结

　　1.成功解决了需求的技术问题。

　　2.其实并没有解决我们最初的问题:

　　　　2.1 为什么全局域中可以关闭，而在onmouseover(鼠标滑过事件)函数中无法关闭的问题

　　

　　3.参考文档：

　　　　MDN:https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

　　4.欢迎小伙伴交流这一问题~

　　　　

JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结的更多相关文章

  1. 关闭定时器(setTimeout/clearTimeout|setInterval/clearInterval)

    1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:timerI ...

  2. Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval

    定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...

  3. 定时器setTimeout()和setInterval()使用心得整理

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...

  4. 有关定时器setTimeout()、setInterval()详解

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...

  5. 原生js轮播以及setTimeout和setInterval的理解

    下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...

  6. JS 定时器 setTimeout 与 setInterval 的区别和用法

    定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...

  7. setTimeout,clearTimeout,setInterval,clearInteral详解

    设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout(" ...

  8. 高级定时器-setTimeout()、setInterval()、链式setTimeout()

    使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能.执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript ...

  9. 20180904 定时器setTimeout和setInterval回调问题

    引用: setTimeout和setInterval两者的区别 setTimeout和setInterval的优缺点 setTimeout和setInterval详解 两者的作用都是在定时多少毫秒后回 ...

随机推荐

  1. Java微信二次开发（六）

    Token定时获取 需要导入库:添加log4j(slf4j-api-1.5.10.jar,slf4j-log4j12-1.5.10.jar,log4j-1.2.15.jar,并且在src下添加log4 ...

  2. 美国运营商推送假5G图标：用户当场蒙圈了

    面对5G大潮,大家都想“争当第一”.美国运营商AT&T想出奇招,打算玩一把“障眼法”. 据外媒报道,AT&T的用户从明年开始会在手机右上角看到“5G E”的图标.当然,这并不是他们的手 ...

  3. BZOJ4555 HEOI2016/TJOI2016求和（NTT+斯特林数）

    S(i,j)=Σ(-1)j-k(1/j!)·C(j,k)·ki=Σ(-1)j-k·ki/k!/(j-k)!.原式=ΣΣ(-1)j-k·ki·2j·j!/k!/(j-k)! (i,j=0~n).可以发现 ...

  4. TortoiseSVN 忽略文件 忽略已提交文件

    主要以下两种情况: 1.首次提交就做好了忽略拦截:项目首次提交到svn服务器的时候,把该删的删了,然后设置忽略规则,就没问题了. 2.提交一段时间忽然想忽略拦截:经常碰到的,发现设置忽略规则后,没法生 ...

  5. MT【26】ln(1+x)的对数平均放缩

    评:1.某种程度上$ln(1+x)\ge \frac{2x}{2+x}$是最佳放缩. 2.这里涉及到分母为幂函数型的放缩技巧,但是不够强,做不了这题.

  6. Stack Overflow：研究发现访问PHP和 Android的流量更可能来自低收入国家

    Stack Overflow 的数据科学家  David Robinson 发现,软件行业的分工让不同发达地区的程序员依赖于不同的编程语言.软件已经是一个全球性的行业,也有高端低端之分,最高端的是数据 ...

  7. android 使用广播 接收和拦截 android系统短信

    package com.app.sms_broadcastreceiver; import android.app.Activity; import android.content.Broadcast ...

  8. 【BZOJ4813】[CQOI2017]小Q的棋盘（贪心）

    [BZOJ4813][CQOI2017]小Q的棋盘(贪心) 题面 BZOJ 洛谷 题解 果然是老年选手了,这种题都不会做了.... 先想想一个点如果被访问过只有两种情况,第一种是进入了这个点所在的子树 ...

  9. 洛谷P1012 拼数 string

    又是大水题... 这一题过水,令人无法接受...... 但是如果我们不知道string的一个神奇的性质的话,就会很难受. 我一开始手写 < 号,但是发现如果 string a 的前一部分恰好是 ...

  10. 集合类（常见的集合类：Collection、List、Set、ArrayList、linkedList、Vector、HashSet、TreeSet）

    一.集合类 定义:一种为了对多个对象进行操作而进行存储的方式. 1.与数组的区别: 数组:可以存储对象,也可以存储基本数据类型,但是一次只能存储一种类型,数组长度固定. 集合:只能存储对象,长度可变, ...