javascript|javascript--21--定时器 javascript|小白

定时器

setTimeout循环一次

setTimeout(boom,1000) function boom() { console.log("boom"); }

在一秒之后执行函数只执行一次只能用毫秒一小时1000*60*60

setInterval循环多次

setInterval(boom,1000) function boom() { console.log("boom"); }

循环多次

setInterval(a,3000) var a =function boom() { console.log("boom"); }

括号第一个值为变量

setInterval("alert(123)",3000);

第一个值为字符串但是只有点击确定等三秒后才出现123 alert会阻碍后面的事件

setInterval(function () { console.log("那你好"); },3000);

第一个值为回调函数也可以执行

setInterval((function () { console.log("111"); return go; })(),3000); function go() { console.log("你好"); }

会立即出现111 等三秒出现你好再等三秒会出现你好

function test(callback) { var a =1; var b=a+1; var c=b; callback(a,b,c); //传进来是个函数，所以能加括号执行 } test(function (a,b,c) { console.log(a,b,c) })

结果是122 这是一个回调函数

console.log("1"); setTimeout(function () { console.log("2") },0); console.log("3");

结果是132 解析顺序从上到下但是到定时器时并不会立即执行

console.log（1）
settimeout
console.log(3)
执行定时器

console.time(); setTimeout(function () { console.timeEnd(); },0);

【javascript|javascript--21--定时器】时间并不是0

var time =setTimeout(function () { console.log("1"); },1000); var time2 = setInterval(function () { console.log("2"); },1000); console.log(time2);

最开始出现的时2 1 然后重复出出现2 定时器有自己的队列从1 开始 time2定时器的返回值是他的队列值 mark
取消定时器 clearTimeout(time2)/clearInterval(time2)

var timer =setTimeout(function () { console.log("1"); },1000); var time2 = setInterval(function () { console.log("2"); },1000); clearTimeout(time2);

结果只会出现1

var time =setTimeout(function () { console.log("1"); },1000); time = setInterval(function () { console.log("2"); },1000); clearInterval(time);

结果为1 因为后面覆盖了所以关闭后面的定时器

var timer =setTimeout(function () { console.log("1"); },1000) timer = setInterval(function () { console.log("2"); },1000); clearInterval(1);

结果打印的是2 因为定时器有自己的队列从一开始

console.log(setTimeout(function () { console.log("3"); },1000)); var time2 =setInterval(function () {//执行一个定时器并将返回值赋值给timer2这个变量 console.log("2"); },1000); clearInterval(time2);

结果是 1 过一秒出现3
动画的原理

递归函数就是在函数体内调用本函数。
动画两种方法

#box{ width: 143px; height: 278px; margin: 100px auto; border: 1px solid red; background:url("images/1.jpg") no-repeat 0 0 ; }

如果想执行10次就停止

(function run() { oBox.style.backgroundPosition = i*143+"px 0"; i--; i %=9; //执行9次返回0 j++; if (j<10){ var a =setTimeout(run,1000/9); //这样就只能执行10次 } })();

(function run() { oBox.style.backgroundPosition = i*143+"px 0"; i--; i %=9; //执行9次返回0 j++; var a=setTimeout(run,1000/9); if (j>=10){ clearInterval(a); } })();

数学函数和圆周运动

abs绝对值

console.log(Math.abs(-12))

结果为12

console.log(Math.random());打印会发现是个大于0 的小数刷新后数字会变化 Math.random()返回一个[0,1) 能取到0，永远取不到1 一个16位小数的伪随机数 Math.random()括号里面不接受传参如果要取5-10 console.log(Math.random()*5+5);
Math.floor() 向下取整舍去小数取整数 console.log(Math.floor(5.11));结果是5
Math.ceil 向上取整不管小数有多小向上取整console.log(Math.ceil(5.00011)); 结果是6
Math.trunc()舍去小数当都是正数时和floor效果一样但是当是负数时候console.log(Math.floor(-5.00011)); 结果是-6 console.log(Math.trunc(-5.00011));结果是-5
Math.round()四舍五入
Math.cos()
Math.sin()
Math.tan()
Math.abs()绝对值
Math.max() 取最大值
Math.min()
Math.pow() x的y次幂 console.log(Math.pow(2,3))结果是8
Math.cbrt()立方根
Math.pI()
Math.sqrt()平方根
弧度 1°为π/180弧度 π/180
top left是关键字