2019-02-23_js_07定时器、函数

定时器、函数

一、定时器

1.)setTimeout(function(){},time) 单次执行
    表示在time毫秒后执行function
2.)clearTimeout(timer)：清除计时器
    timer:表示定义的计时器
3.)setInterval(function(){},time):可循环执行function
      表示每隔time毫秒后执行的函数
4.)clearInterval(timer)
    timer:表示定义的计时器

//鼠标按下时间
var div = document.querySelector(".test");
//封装长按功能函数
function longpress(el,callback){//el：传入元素、callback：传入一个函数
    var timer;
    el.addEventListener("mousedown",function(){
        timer = setTimeout(function(){//长按
                callback();
            },1000)
        })
    //鼠标抬起
    document.addEventListener("mouseup",function(){
        //console.log("鼠标被抬起了");
        clearTimeout(timer);//清除计时器
    })
        
    }
longpress(div,function(){
    alert("哈哈哈哈");
});

//模拟一个双击事件(提示，用定时器实现)
function twoClick(el,callback){
    var isClick = false;
    el.addEventListener("click",function(){
        if(isClick==true){
            callback();
            isClick = false;
            clearTimeout(t);
        }else{
            isClick = true;
            var t = setTimeout(function(){
                isClick = false;
            },300)
        }
    })
}

二、函数

函数无论在声明的前面或者是声明的后面都可以调用
argument：数组的形式接收函数的参数
length:获取到函数的形参个数

function calc(){
    if(arguments.length==1){
        alert("你的名字："+arguments[0]+"\n 经过我的神机妙算，你的未来无可限量");
    }else{
        alert("请输入你的名字");
    }
}
calc("啥啥啥");//函数提前，无论在声明的后面还是前面，都可以调用
console.log(calc.length);

闭包（函数体内嵌套函数）：使得函数可以调用其他函数体内变量

//valueOf
function fun(){
    var x = 1;
    // 闭包（函数体内嵌套函数）
    function func(){
        console.log("我是func函数里面的函数",x);
    }
    func();
    return x;
}
fun();
console.log(fun.valueOf());//获取函数体
console.log(typeof fun.toString());//输出函数 类型是字符串

1.函数声明的方式：

      1）函数声明：function name(){}
      2）函数表达式：var fun = function(){}
         调用方法：变量名+小括号
      3）箭头函数（es6语法）：
          第一种形式：()=>{};
          第二种形式：(name=>{})();
          第三种形式：(name=>())();
  注意：
      当我们使用函数表达式的方式来声明函数的时候，也给了函数名，
      这个函数名是不能够在函数体外进行调用，只能够在函数体内调用

//当我们使用函数表达式的方式来声明函数的时候，也给了函数名，
//这个函数名是不能够在函数体外进行调用，只能够在函数体内调用
var test = function func1(){
    console.log(func1);
    console.log("哈哈哈");
}
console.log(test.name);//func1
//          func1();//直接报错  func1 is not defined 一整个是一个值
test();//哈哈哈

go1();//函数声明，调用第二个函数 因为全局任意地方都可以调用
var go1 = function(){
    console.log("函数表达式")
}
go1();//函数表达式
function go1(){
    console.log("函数声明");
}//会提前，被覆盖掉
go1();//函数表达式

2.函数this的指向（箭头函数除外）：

谁调用函数，这个this就指向谁
this的指向一般有3种情况：
        1.全局作用域内调用函数，this指向window
        2.通过事件来调用函数，this指向这个事件的调用者
        3.对象调用其方法，this指向这个对象

setTimeout(function(){
    console.log(this);//window
},1000)
window.setTimeout(function(){
    console.log("通过window来调用定时器",this);
},1000)//setTimeout是window的方法


function foo(){
    console.log(this);//window
}
foo();//最大的对象是window
var div = document.querySelector(".test");
div.addEventListener("click",function(){
    console.log(this);//div
});

//对象的方法调用
var obj ={
    name:"bgg神教，一统江湖",
    skill:function(){
        console.log(this);
    }
}
//obj.skill();//obj
var skr = obj.skill;
skr();//window

div.addEventListener("click",()=>{
    console.log(this);
});//window //箭头函数指向window

3.箭头函数案例

//箭头函数()=>{}
//第一种
((age)=>{
    console.log(age);
    console.log(window);
})(20);

//箭头函数()=>{}
//第二种
(age =>{
    console.log(age);
})(222);
setTimeout(age =>{
    console.log("sss")
},1000);

//箭头函数()=>{}
//第三种 只能写一个语句(语句后不能有分号；)
(age=>console.log(age))(888);
//(age=>console.log(age);console.log("aaaaa");)(888);//报错