[Web front-end] 024 js and timer function

1. Javascript Timer

1.1 Timed Events

• A set interval, time after time to execute the code, this is "timed event"

1.2 Role

1, animation
2, asynchronous operation

1.3 timer type and syntax

• setInterval () and setTimeout () method is a two Window object

/*
定时器：
    setTimeout      单次的定时器 
    clearTimeout    关闭单次的定时器

    setInterval     多次的定时器
    clearInterval   关闭多次的定时器
*/

function timeGoesBy(){
    console.log("Time flies by.");
}

var time1 = setTimeout(timeGoesBy, 5000);
var time2 = setInterval(timeGoesBy, 500);

setTimeout(function(){
    clearTimeout(time1);
    console.log("time1 has no chance to carry it out.");
    
    clearInterval(time2);
    console.log("time2 was executed 6 times.");
}, 3000);

• operation result

⑥ Time flies by.
  time1 has no chance to carry it out.
  time2 was executed 6 times.

2. Javascript function

2.1 using the function statement to define the function

function abc(){
    alert('abc');
}

2.2 Defined Functions in Expressions

/*
形式
var 函数名 = function(参数1, 参数2, ...){函数体};
*/

var add = function(a, b){
        return a+b;
}

// 调用函数
document.write(add(50, 20));

2.3 arguments

• In the function code, use the special object arguments The , developers do not need it clear that the parameter name, you can access them
• For example, the function in the sayHi () , the first parameter is the Message , with the arguments [0] can access this value

• That is, the first parameter at position 0, the second parameter is a position 1, and so on

• For example

/* 1. 使用 function 关键字定义函数
    此法优先级较高，不限调用地点
    JS 中没有默认值参数

    小发现：把 console.log() 写成 print() 会调出打印机
*/
function demo(a, b){
    console.log('a =', a, '\tb =', b)
    console.log(arguments);
    for(i in arguments){
        // console.log('i =', i, '\targuments[' + i + '] =', arguments[i]);
        console.log('i = %s\targuments[%s] = %d', i, i, arguments[i]);
    }
    console.log("函数被调用了！");
}
// demo(1, 2);
// demo();      // 少传参数 -> undefined
demo(1, 2, 3);  // 多传参数 -> 多余的参数会被忽略
};

• operation result

a = 1   b = 2
Arguments(3)
i = 0   arguments[0] = 1
i = 1   arguments[1] = 2
i = 2   arguments[2] = 3
函数被调用了！

2.4 About variables and parameters of the problem:

• Out of the function variable is a global variable defined, the function can be used directly
• Is not used within the function var variable is defined in a global variable (limited to non-strict mode)

• Using the function var variable keyword defines a local variable, i.e., the function is invalid

• For example

/* 1.
    全局变量：在函数外部声明的变量
    局部变量：在函数内部声明的变量
*/
var g1 = 1;
function demo1(){
    var l1 = 2;
    console.log('g1 = %d, l1 = %d', g1, l1);
}
demo1();
console.log('g1 =', g1);
// console.log('l1 =', l1); // 会报错


// 2.1 小例子
var g2 = 5;
function demo2(){
    console.log('g2 =', g2);
    g2 = 10;
    console.log('g2 =', g2);
}
console.log('g2 =', g2);
demo2();
console.log('g2 =', g2);

// 2.2 小例子
var g3 = 5;
function demo3(){
    console.log('g3 =', g3); // 一旦函数内部 var 了变量 n，那么函数中所有的 n 都变成了局部变量
    g3 = 10;
    console.log('g3 =', g3);
    var g3 = 15;
    console.log('g3 =', g3);
}
console.log('g3 =', g3);
demo3();
console.log('g3 =', g3);

// 2.3 小例子
function demo2(){
    l3 = 10; // 这里没使用 var，意为将 l3 视为全局变量（限非严格模式）
    console.log('l3 =', l3);
}
demo2();
console.log('l3 =', l3); // 非严格模式下，函数内不用 var 声明的变量可以在函数外部使用
};

• operation result

g1 = 1, l1 = 2
g1 = 1
g2 = 5
g2 = 5
g2 = 10
g2 = 10
g3 = 5
g3 = undefined
g3 = 10
g3 = 15
g3 = 5
l3 = 10
l3 = 10