angular.js的超时指美元令对window.setTimeout做了一个封装,它的返回值是一个承诺对象。当定义的时间到了以后,这个承诺对象就会被解决,回调函数就会被执行。
如果需要取消一个超时,调用美元timeout.cancel(承诺)方法。
<强>用法:
美元超时(fn(延迟),[invokeApply]);
fn:回调函数(必填)
延迟:number类型。延迟的时间(非必填),如果不填,表示等线程空下来以后就执行。比如当页面被渲染完成后。
invokeApply:布尔值。是否需要进行脏值检测(非必填),不填默认为假,如果设置为真,则fn回调会被包在范围。应用()美元中执行
返回值:返回一个承诺对象。当定义的时间到了以后,这个承诺对象就会被resolve.resolve的值就是fn回调函数的返回值
<强>方法:
timeout.cancel美元([承诺])
承诺:一个由美元超时()所创建的承诺对象。(非必填)。调用取消()以后,这个承诺对象就会被拒绝。
返回值:如果美元超时()的回调还没有被执行,那就取消成功。返回真正的
下面来简单的测试一下:
var timeoutApp=angular.module (“timeoutApp”, []);
timeoutApp.run(函数(超时美元){
var=$超时(函数(){
console.log(“执行超时美元回调”);
返回“角”
}, 1000);
交配制度(功能(数据){
console.log(数据)
}、功能(数据){
console.log(数据)
});//timeout.cancel美元(一个);
}）
之前
运行以后看到控制台打印:
执行超时美元回调
角
如果我打开注释,执行.cancel()方法,那么美元超时的回调就不会被执行,它返回的承诺被拒绝,控制台打印:
取消
下面做个很实用的小演示:延迟下拉菜单:鼠标放到按钮上的时候,延迟500毫秒显示下拉菜单,当鼠标离开按钮的时候,延迟500毫秒隐藏下拉菜单,如果鼠标是进入了下拉菜单部分,那么就不隐藏下拉菜单。如果鼠标离开了下拉菜单,延迟500毫秒隐藏下拉菜单,如果鼠标是进入了按钮,那么还是不隐藏下拉菜单
html:
& lt; !DOCTYPE html>
& lt; html ng-app=皌imeoutApp”比;
& lt; head>
& lt; title> $超时服务& lt;/title>
& lt;元charset=皍tf - 8”比;
& lt;链接rel="样式表" href=" https://www.yisu.com/bootstrap.css " rel=巴獠縩ofollow”/比;
& lt;脚本src=" https://www.yisu.com/angular.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/script.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
* {
字体类型:“微软YAHEI”
}
& lt;/style>
& lt;/head>
& lt;身体比;
& lt; div ng-controller=癿yCtrl”比;
& lt; div类=跋吕毕吕?
& lt;按钮类=" btn btn-default dropdown-toggle " type="按钮" ng-mouseenter=皊howMenu ()“ng-mouseleave=癶ideMenu()在
下拉
& lt;跨类="脱字符号"祝辞& lt;/span>
& lt;/button>
& lt; ul类="下拉菜单" ng-show=癷fShowMenu ng-mouseenter”=皊howMenu ()“ng-mouseleave=癶ideMenu()在
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞Action & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在另一个action & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在别的here & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在分离link & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
之前
js: ,
var timeoutApp=angular.module (“timeoutApp”, []);
timeoutApp.controller (myCtrl,函数(范围){
美元的范围。ifShowMenu=false;
});
timeoutApp.directive(“下拉”,函数(超时){
返回{
限制:“EA”,
链接:函数(范围、iele iattr) {
范围。showMenu=function () {
美元timeout.cancel (scope.t2);
范围。t1=$超时(函数(){
范围。ifShowMenu=true
},500)
}；
范围。hideMenu=function () {
美元timeout.cancel (scope.t1);
范围。t2=$超时(函数(){
范围。ifShowMenu=false
},500)
}；
}
}
}）
