setTimeout 与 setInterval 中的 this
不论以后应用的 this 指向谁,在应用 setTimeout 或者 setInterval 中的 this 都会指向最外层对象,也就是 window,而应用箭头函数就能够让 this 持续指向上一层对象而不是最外层。
<body>
<buttn id='demo'> 发送验证码 </button>
</body>
<script type="text/javascript">
// jquery
// 从新发送验证码倒计时
$("#demo").click(functuin() {
// 给 demo 按钮增加 disabled 禁用属性,this 指向 button 标签对象
$(this).addClass('disabled');
var time = 30;
// 想要在 click 中应用 setTimeout, 一般写法 setTimeout(function(){}, 1000),会让 this 指向 window,导致不能应用 $(this) 去间接操作 button
// 能够应用 _this = this 先把 button 对象拿进去,更简略的办法是应用箭头函数 (=>)
var interval= setInterval(() => {if(condition){
// 去除定时器
clearInterval(interval);
$(this).removeClass('disabled');
$(this).attr('disabled', false);
$(this).test("从新发送");
return;
}
time--;
$(this).text('从新发送 (' + time + 's)');
}, 1000)
})
</script>