闭包、定时器、计时器

闭包

在外部函数中定义一个内部函数
这个内部函数会操作外部函数中声明的变量
并且将这个内部函数在外部函数的外面去调用或使用
所形成的闭合回路叫闭包
特点/原理
强行延长了函数内局部变量的声明周期,让这个变量不会被彻底销毁

var btn = document.getElementById("btn");
    function fn1() {
        var a = 0;
        btn.onclick = function() {
            a++;
            console.log(a);
        }
    }
    fn1();

定时器

setTimeout
规定 若干秒之后 执行一次且执行一次
计时器,每隔若干秒执行一次,如果不清楚就一直执行下去
定时器,若干秒之后执行一次,且只执行一次

setTimeout(function(){
        console.log(1);
    },1000);

计时器

seInterval
计时器是一个方法,这个方法中有两个参数
第一个参数,是执行的是需要执行的代码片段
第二个参数,是执行的时间间隔,单位是ms毫秒

var a = 0;
setInterval(function () {
    setInterval(function () {
        a++;
        }, 1000)
        a++;
    console.log(a);
}, 1000);

注意!!!!!!!! setInterval 可以嵌套 setInterval
但是!!!!!!!! 千万千万不要嵌套!!!

setInterval有返回值,他的返回值是他的id
setInterval的id是数字
通常从1开始按顺序递增
顺序是setInterval创建的顺序
除了火狐浏览器之外,其他的setInterval的id都是从1开始
火狐浏览器是从2开始

function randNum(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }
var ooo = document.getElementById('ooo')
var num = 0;
var arr = [11, 22, 33, 44, 55]
var arr1 = ["1", "2", "3", "4", "5", "6", "7", "8", "8", "9", "10", "11", "12", "13", "14", "15", "16"];
/*var d = setInterval(function () {
        num = randNum(0, 16);
        // console.log(arr[num]);
        ooo.innerHTML = (arr1[num]);
        a = randNum(0, 255);
        b = randNum(0, 255);
        c = randNum(0, 255);
        ooo.style.backgroundColor = `rgb(${a},${b},${c})`
    }, 120)
    console.log(d);*/
var num = 0;
    ooo.onclick = function () {99
        if (num % 2 == 0) {
            clearInterval(d);
        } else {
            d = setInterval(function () {
                numb = randNum(0, 16);
                // console.log(arr[num]);
                ooo.innerHTML = (arr1[numb]);
                a = randNum(0, 255);
                b = randNum(0, 255);
                c = randNum(0, 255);
                ooo.style.backgroundColor = `rgb(${a},${b},${c})`
            }, 100)
        }
        num++;
    }

清除计时器

clearInterval
清除计时器 是根据 在这个计时器的 id 来清除的

var num = 0;
    ooo.onclick = function () {99
        if (num % 2 == 0) {
            clearInterval(d);
        } else {
            d = setInterval(function () {
                numb = randNum(0, 16);
                // console.log(arr[num]);
                ooo.innerHTML = (arr1[numb]);
                a = randNum(0, 255);
                b = randNum(0, 255);
                c = randNum(0, 255);
                ooo.style.backgroundColor = `rgb(${a},${b},${c})`
            }, 100)
        }
        num++;
    }

开关

var num = 1;
    ooo.onclick = function () {
        if (num) {
            clearInterval(d);
            num = 0;
         } else {
           d = setInterval(function () {
                 num = randNum(0, 16);
                // console.log(arr[num]);
                 ooo.innerHTML = (arr1[num]);
                a = randNum(0, 255);
                 b = randNum(0, 255);
                c = randNum(0, 255);
                 ooo.style.backgroundColor = `rgb(${a},${b},${c})`
             }, 120)
            num = 1;
         }
    }

封装清除所有定时器的方法

function clearAll(){
        var last = setInterval(function () {}, 1000);
        for(var i = 1;i <= last;i++){
            clearInterval(i)
        }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. setInterval() 计时器 计时器,每隔一个指定时间段,重复执行的代码块或方法,以毫秒为单位,最小为...
    LKISSW阅读 541评论 0 0
  • 1. setInterval() 计时器,每隔一个指定时间段,重复执行的代码块或方法,以毫秒为单位,最小为10-1...
    晴空0_0阅读 156评论 0 0
  • 1. setInterval() 计时器,每隔一个指定时间段,重复执行的代码块或方法,以毫秒为单位,最小为10-1...
    A社会社会阅读 192评论 0 0
  • 1. setInterval() 计时器,每隔一个指定时间段,重复执行的代码块或方法,以毫秒为单位,最小为10-1...
    _糖炒李子阅读 375评论 0 0
  • 1. setInterval() 计时器,每隔一个指定时间段,重复执行的代码块或方法,以毫秒为单位,最小为10-1...
    一枕星河梦毅阅读 153评论 0 0