setTimeout(function () {
$("#success").parents('tr').css("background-color", "#BEBEBE");
nowdatetime = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss');
document.getElementById("success").parentNode.parentNode.setAttribute("id", nowdatetime);
$("#fail").parents('tr').css("background-color", "#BEBEBE");
nowdate = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss SS');
document.getElementById("fail").parentNode.parentNode.setAttribute("id", nowdate);
setTimeout(function () {
fadeColor(
{ r: 190, g: 190, b: 190 }, //star color
{ r: 255, g: 255, b: 255 }, //end color
function (color) {
document.getElementById(nowdate).style.backgroundColor = color;
}, 1, 10);
}, 3000);
setTimeout(function () {
fadeColor(
{ r: 190, g: 190, b: 190 }, //star color
{ r: 255, g: 255, b: 255 }, //end color
function (color) { document.getElementById(nowdatetime).style.backgroundColor = color; }, 1, 10);
}, 3000);
}, 0);
代码中分别有两个settimeout执行我是知道互补影响的,但是按钮连续点的时候 就乱套了
设置执行的时候不可以点击按钮,这样如何?
我们看下下面的代码:
//A
setTimeout(function(){
console.log('timeout_0_0');
setTimeout(function(){
console.log('timeout_0_0_3_0');
},3000);
setTimeout(function(){
console.log('timeout_0_0_3_1');
},3000);
},0);
//B
setTimeout(function(){
console.log('timeout_1_0');
setTimeout(function(){
console.log('timeout_0_1_3_0');
},3000);
setTimeout(function(){
console.log('timeout_0_1_3_1');
},3000);
},0);
如果单独执行A段代码,就是你1次点击
输出结果为
timeout_0_0
timeout_0_0_3_0
timeout_0_0_3_1
如果A,B一起执行,就是你连续点击2次
输出结果为
timeout_0_0
timeout_1_0
timeout_0_0_3_0
timeout_0_0_3_1
timeout_0_1_3_0
timeout_0_1_3_1
也就是有相同超时时间的定时器,按添加的顺序触发
setTimeout方法被执行后,会加入到JS的定时器执行队列中,JS会计算超时的时间的先后设置好触发的时间点,当事件循环检查到有定时器需要触发就执行对应的函数~~~
在你连续点击的情况下,nowdatetime和nowdate变量将被后一次timeout0定时器绑定的函数修改掉
nowdatetime = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss');
nowdate = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss SS');
而你timeout3定时器又是通过
document.getElementById(nowdate)方法在查找DOM元素,导致DOM元素会找不到而执行出错~~~
如下修改,可以保证代码执行不报错,但是不能阻止已经加入的timeout3定时器的执行
setTimeout(function () {
$("#success").parents('tr').css("background-color", "#BEBEBE");
var nowdatetime = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss');
document.getElementById("success").parentNode.parentNode.setAttribute("id", nowdatetime);
$("#fail").parents('tr').css("background-color", "#BEBEBE");
var nowdate = jsUtils.datetime.now('yyyy-MM-dd hh:mm:ss SS');
document.getElementById("fail").parentNode.parentNode.setAttribute("id", nowdate);
var nowdateDOM=document.getElementById(nowdate);
var nnowdatetimeDOM=document.getElementById(nowdatetime);
setTimeout(function () {
fadeColor(
{ r: 190, g: 190, b: 190 }, //star color
{ r: 255, g: 255, b: 255 }, //end color
function (color) {
nowdateDOM.style.backgroundColor = color;
}, 1, 10);
}, 3000);
setTimeout(function () {
fadeColor(
{ r: 190, g: 190, b: 190 }, //star color
{ r: 255, g: 255, b: 255 }, //end color
function (color) {
nnowdatetimeDOM.style.backgroundColor = color; }, 1, 10);
}, 3000);
}, 0);
应该是三秒后同时执行了两次,结果看上去好像执行了一次
按钮点击事件的回调
1.禁止按钮
2.执行延迟代码,延迟代码加入激活按钮的代码
这样执行之前就只能按一次
或者用变量保存先前的setTimeout,每点击一次就清掉保存的setTimeout,然后再开新的setTimeout
又或者用标记位去判断