定时器

JavaScript提供执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成

function f(){
    return 1
}
console.log( f )
console.log( f() )

function f(){}
setTimeout(f)  //这个是正确的
setTimeout(f())

如果:
function f(){
    return function(){
    }
}
setTimeout(f)     //这两个都可以
setTimeout(f())  //这两个都可以

function f(){
    return function f2(){
        return 3
    }
}
f //是一个函数
f() //是一个函数
f()() //3

function f(){
    console.log(1)
}
setTimeout(f)    //相当于一个闹钟 f为下面压的一张纸 代码都执行完毕后再看闹钟 再执行纸上的内容
console.log(2)   //结果 2 1

function f(){
    console.log(1)
}
var timerId = setTimeout(f)
console.log('id:' + timerId) //1
console.log(2)

var timerId = setTimeout(f) 
console.log('id:'+ timerId)  //2
//可以理解为 当纸从闹钟拿出来 闹钟会销毁  再设置新的闹钟

function f(){
    console.log(1)
    console.log(new Date())
}
console.log( new Date())
var timerId = setTimeout(f, 3000) 

function f(){
    console.log(new Date() - 0) //375
    console.log(1
}
vart timerId = setTimeout(f,0)  //可以理解为闹钟自带延迟
console.log(new Date() - 0)  //336  40毫秒的延迟

let timeoutID = window.setTimeout(fun[, delay, param1, param2, ...]); //[]表示可选的
let timeoutID = scope.setTimeout(code[, delay])
let timeoutID = window.setTimeout(function, milliseconds)

//第一种
function f(a,b){
    console.log(a,b)
    console.log(arguments)
}

var timerId = setTimeout(f,500,1,2) //IE只支持前两个参数 第三个不支持


//第二种
var timerId = setTimeout('console.log(1)',1000)
//第三种 暂时不管

window.clearTimeout(timereId)  //砸掉闹钟

异步

function 排队取号(){
    setTimeout(function f2(){
        return '你的号码是 233'
    },6000)
}
var function 黄牛(){

}
var result = 排队取号(黄牛) //undefined

//---------------------------------------------------

function 排队取号(黄牛){
    setTimeout(function f2(){
        黄牛('你的号码是233')
    },60000)
}
var 我的号 = undefined
function 黄牛(result){
    我的号 = result
}
排队取号(黄牛)  //undefined

//---------------------------------------------------
function 排队取号(黄牛){
    let id = setTimeout(function f2(){
        if(有号){
             黄牛.通知我(233)
        }else{
             黄牛.告诉我没号
        }       

    },3000)
    return id
}
var 我的号 = undefined
var 黄牛 = {
    name: '黄宏'
    通知我: function(result){
        我的号 = result
    },
    告诉我没拿到号: function(){
        我的号 = '没号了'
    }
}
排队取号(黄牛)

//函数是一个对象

//---------------------------------------------------
function 排队取号(通知我){
    var id = setTimeout(function f2(){
        通知我(233)
    },3000)
    return id
}

var 我的号 = undefined

function 通知我(result){
    我的号 = result
}
排队取号(通知我) //回调

//异步 不等结果  可以有回调 也可以没有回调

#BOM
Browser Object Model 浏览器对象模型
BOM没有文档,大多是约定俗称的
一般通过window对象来操作

window.history
window.history.back
window.history.forward
window.history.go(-1)  //back
window.history.go(1)  //forward

window.innerHeight  //不包含tab和地址栏
window.innerWidth

window.location
window.location.href="http://www.baidu.com" //在当前窗口打开百度  注意要写http
window.location.href="https://www.baidu.com"
window.location.href="//www.baidu.com"
window.location = "https://www.baidu.com"  href也可以不写

location.protocol  //协议
location.hostname   //域名
location.port   //端口
location.host  //域名+端口
location.pathname  //不包含?后面的
location.search  //?后面的  不包含#后面的
location.hash  //#后面的
location.origin  //源  协议域名端口号

<a href="https://www.qq.com"  target="FEM">qq</a>
window.name   //FEM  浏览器提供的更改name的API

window.navigator //关于浏览器的所有东西
window.navigator.userAgent

window.outerHeight;
window.outerWidth;

window.pageXOffset  //window.scrollX
window.pageYOffset   //window.scrollY

window.parent // 父页面的window
window.parent.name

window.screen
window.screen.availHeight  //屏幕上用来展示窗口的最大高度
window.screen.colorDepth
window.screen.height
window.screen.width
window.self   // window.self   返回window  注意! 不要乱声明全局变量

window.open()
window.open('http//baidu.com')
window.open('http://baidu.com','_self')    //当前窗口打开
window.open('http://baidu.com','_blank') //新窗口打开

let f = 'width=400px,height=400px'  //第三个参数
window.open('http://baidu.com', '_blank',f)

let f = 'width=400px,height=400px,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes'
window.open('http://baidu.com','_blank',f) //弹窗

window.opener.location.reload()  //打开我(弹窗)的窗口的页面刷新

题目1:下面的代码输出多少?修改代码让fnArri输出i 使用两种以上的方法

1.png

方法1:

    var fnArr = [];
    for (var i = 0; i < 10; i++){
        fnArr[i] = (function(j){
            return function(){
                return j
            }
        })(i)
    }
    console.log( fnArr[3]() );

方法2:

   var fnArr = [];
   for (var i = 0; i < 10; i++){
       (function(i){
           fnArr[i] = function(){
               return i;
           }   
       })(i)
   }
   console.log( fnArr[3]() )

方式3:

    var fnArr = [];
    for (var i = 0; i < 10; i++){
        fnArr[i] = function(){
            return i;
        }
    }
    console.log( fnArr[3]() )

题目2:封装一个汽车对象,可以通过如下方式获取汽车状态

2.png

    var Car = (function(){
        var speed = 0;
        function setSpeed(s){
            speed = s;
        }
        function getSpeed(){
            console.log(speed);
            return speed;
        }
        function accelerate(){
            speed += 5;
        }
        function decelerate(){
            speeed -= 5;
        }
        function getStatus(){
            if(speed > 0){
                console.log('still running');
            }else if(speed === 0){
               console.log('stop');
            }
        }
        return {
            setSpeed: setSpeed,
            getSpeed: getSpeed,
            accelerate: accelerate,
            decelerate: decelerate,
            getStatus: getStatus; 
        }
    })()
    Car.setSpeed(30);
    Car.getSpeed();
    Car.accerlate();
    Car.getSpeed();
    Car.decelereate();
    Car.decelerate();
    Car.getSpeed();
    Car.getStatus();
    Car.decelerate();
    Car.decelerate();
    Car.getStatus();

题目3:下面这段代码输出结果是?为什么?

3.png

    var a = 1;
    setTimeout(function(){
        a = 2;
        console.log(a); //2
    }, 0);
    var a;
    console.log(a);  //1
    a = 3;
    console.log(a); //3

    //setTimeout 会等待其他语句执行完毕后再执行
    //所以先输出第一个 a 因为先执行var a = 1 所以先打印1
    //然后输出第三个a  因为var a = 3 所以打印3
    //最后输出第二个a  a在自己函数作用域下 与外界无关
    //所以第二个a 为 2

题目4:下面这段代码输出结果是?为什么?

4.png

var flag = true;
setTimeout(function() {
    flag = false;
},0)
while(flag){}
console.log(flag);

//先跳过setTimeout
//setTimeout等待while执行完毕  flag一直为true 无限执行循环
//console.log不会执行 

题目5:下面这段代码输出?如何输出 delayer: 0, delayer:1...(使用闭包来实现)

5.png

for(var i=0;i<5;i++){
    (function(t){
        return setTimeout(function(){
            console.log('delayer:' + t );
        }, 0);
    })(i);
    console.log(i);
}

题目6:如何获取元素的真实宽高

window.getComputedStyle();

题目7:URL如何编码解码?为什么要编码?

一般来说，URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号
一般有四种情况：
1.网址路径中包含汉字
2.查询字符串包含汉字
3.Get方法生成的URL包含汉字
4.Ajax调用的URL包含汉字
不同的操作系统、不同的浏览器、不同的网页字符集，将导致完全不同的编码结果。
使用Javascript先对URL编码，然后再向服务器提交，不要给浏览器插手的机会。因为Javascript的输出总是一致的，所以就保证了服务器得到的数据是格式统一的。

//js编码方法
escape()
unescape()

无论网页的原始编码是什么，一旦被Javascript编码，就都变为unicode字符。也就是说，Javascipt函数的输入和输出，默认都是Unicode字符
encodeURI()是Javascript中真正用来对URL编码的函数。
它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #"，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%

encodeURI()
decodeURI()

最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。
因此，"; / ? : @ & = + $ , #"，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。

encodeURIComponent()
deencodeURIComponent()

题目8:补全如下函数,判断用户的浏览器类型

8.png

function isAndroid(){
    if(/android/i.test(navigator.userAgent)){
        console.log("The browser type is Android")
    }
}
function isIphone(){
    if(/iphone/i.test(navigator.userAgent)){
        console.log("The browser type is iphone")
    }
}
function isIpad(){
    if(/ipad/i.test(navigator.userAgent)){
        console.log("The browser type is iPad")
    }
}
function isiOS(){
    if(/(iphone)|(ipad)/i.test(navigator.userAgent)){
        console.log("The browser type is iOS")
    }
}