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);//报错
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 14,026评论 0 38
  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 2,910评论 2 9
  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 3,557评论 0 1
  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    陈老板_阅读 471评论 0 1
  • 函数参数的默认值 基本用法 ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数lo...
    oWSQo阅读 257评论 0 0