饥人谷_李栋
1、回调函数
2、动态参数
3、setTimeout 、setInterval
4、缓动
5、$node.animate
一、回调函数callback-- 给别人调用的函数
- 有参数
function traverse(array,callback){
var length=array.length
for(var i=0;i<length;i++){
callback(i,array[i])
}
}
traverse(['a','b','c'],function(index,item){
console.log(index)
console.log(item)
})
//0
//"a"
//1
//"b"
//2
//"c"
- 无参数
function func(){
console.log("hello,callback")
}
function other(callback){
callback()
}
other(func)
//"hello,callback"
二、动态参数--形参不固定的时候用到
函数里面会内置一个参数对象:arguments
function doSometingWith(who,say,callback){
if(arguments.length===3){
console.log(say)
callback()
}else if(arguments.length===2){
callback=say
callback()
}
}
doSometingWith('tom','hi tom',function(){
console.log('play with tom')
})
doSometingWith('tom',function(){
console.log('hit tom')
})
//"hi tom"
//"play with tom"
//"hit tom"
伪数组
实参会放到arguments[i]这个伪数组里面
arguments[0],arguments[1]...可读写(最好不要写,写会改变实参的值)
三、setTimeout setInterval
1.setTimeout
setTimeout(func,[delay.param1,param2...])
上面可理解为,在delay时间之后,如果空闲,调用func函数,以param1,param2...为函数func的参数
- func回调函数
- []里面的参数可选
- delay是个数字,代表在多少秒之后做什么事
delay要注意以下几点:
1.单位 ms
2.不一定是在指定的时间运行 **
//在delay时间之后把回调函数放到待办事项队列里面,什么时候闲了,再执行
3.一定是异步执行的
4.delay最小不一定是0
如果不是当前页面,最小的间隔是1s** - setTimeout里面嵌套setTimeout,里面的setIimeout最小的间隔是4ms
//嵌套ie下是15ms
var number=10
setTimeout(function step(){
number--
if(number>0){
console.log(number)
setTimeout(step,1000)
}else{}
},1000)
2.setInterval 会不停的重复
3.清除
window.clearTimeout(timeoutId)
window.clearInterval(timeoutId)
//timeoutId参数是在定义setTimeout的时候传的
var timeoutId=setTimeout(callback,[delay])
4.嵌套
setTimeout(func名,delay)//如果回调函数有名字
setIiemout(arguments.callee,delay)//回调函数没名字
四、缓动easing functions
更加自然的运行动画
//需要装插件
五、jQuery动画API
1.animate
animate(参数对象,duration,easing,callback)
// 参数对象的属性值只支持数字类型的
width、height、opacity(透明度)
//duration有数字、fast、slow
//easing有swing、linear别的需要插件
//callback函数在动画完成之后执行
高级用法
.animate(参数对象,option对象)
//option对象包括duration、easing、queue...
注意,queue类型为boolean表示是否把动画放入待办事项队列执行,否代表直接执行动画
2.finish(queue)
停止当前的动画,移除所有队列里的动画,完成动画最终状态
3.stop
stop([clearQueue],[jumpToEnd])
// clearQueue 是否把队列里的动画清除
// jumpToEnd 是否跳到最终状态
4.delay
delay(数字)
//动画停几秒,只能作用在慢慢动的API
5.slideUp()、slideDown()、slideToggle()//卷起来、展开
6.fadeOut()、fadeIn()、fadeToggle()//淡出、淡入
7.fadeTo
fadeTo(duration,[数值],callback)
//数值代表透明度
8.hide()、show()、toggle()