定时器、函数
一、定时器
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);//报错
网友评论