Following the operation xml of the previous article , this article writes multiple timers to coexist.
Basic business: When the start button of a row is clicked, the timer of this row is started to count down, and the timer is stopped when the stop is clicked to stop the countdown. Clicking "One-click Start" will start the countdown function of the checked game, and clicking "One-click Stop" will stop the countdown of the checked game.
The idea of multiple timers coexisting is referred to this article: http://www.cnblogs.com/Jerrycjc/p/4538048.html , the following code directly:
1. Single start and stop :
/**
* Click the "Start" button to trigger this event, which is used to start the countdown function
* @param obj: start button A label
* **/
function startInterval(obj){
var $ td = $ (obj) .parent ();
var $ tr = $ td.parent ();
var $ intervalTd = $ td.prev ();
var curID = $tr.attr("curID");
var gameName = $tr.children().eq(gameNameIndex).text();
//1, check whether to start
var isStart = $tr.attr("sign");
//Indicates that it has been started, then do not process
if(isStart!=null && isStart!=undefined && isStart=="1"){return false;}
/*
//1, check whether the button is disabled
var isDisabled = $(obj).attr("disabled");
if(isDisabled!=undefined && (isDisabled==true || isDisabled.toString()=="true")){return false;}
*/
//Add startup ID
$tr.attr("sign","1");//1: started 0-not started
//2, remove the original countdown style
$intervalTd.removeClass("cutDown");
//3, get the countdown
editCutDownTime($td);//No countdown box initialization value
// var maxTime = parseInt($td.prev().prev().prev().text());//Get interval time
var maxTime = parseInt($td.prev().text());//Get the countdown time
$intervalTd.text(maxTime);//Countdown initialization
//4, the state of the device button
// start button greyed out
disableLink(obj);
// stop button to start
enableLink($(obj).next()[0]);
//If the start time is shorter than the reminder time, then you need to remind (temporary interval time)
if(maxTime<=parseInt(remindTime)){//The description is less than the reminder time, then a reminder is required
// turn on the beep
playRemindInfo(curID,(gameName+"'s big boss also has "+(maxTime>0?" and "+maxTime+"minutes":"already")+"minutes arrived at the scene!"));
//add class
$intervalTd.addClass("cutDown");
}
//??? sort the countdown box
sortTable(cutDownIndex,false);
//5, start the countdown
var timer = window.setInterval (function () {
sortTable(cutDownIndex,false);
if(maxTime>0){//The countdown is not over yet
maxTime--;//Reduce one minute
//The countdown box is reduced by one minute
$intervalTd.text(maxTime);
//alert(maxTime+"\t"+(maxTime<=parseInt(remindTime)));
if(maxTime<=parseInt(remindTime)){//The description is less than the reminder time, then a reminder is required
// turn on the beep
playRemindInfo(curID,(gameName+"Big BOSS"+(maxTime>0?"and"+maxTime+"minutes":"already")+"arrived at the scene!"));
//add class
$intervalTd.addClass("cutDown");
}
}else{//Indicates that the countdown time is 0 or less than 0, then stop the countdown
window.clearInterval(timer);
endInterval($(obj).next()[0],1);//Call the stop function
}
}, intervalTime);
//6. Store the timer in the map
//alert("curID:"+curID+"\t"+timer);
timerMap.put("curID"+curID,timer);
}
/**
* Click the "Stop" button to trigger this event, which is used to stop the countdown function
* @param obj:A tag
* @param flag: 1 - do not need to stop the timer (automatically stop the timer when the countdown is 0) 2 - need to stop the timer
* **/
function endInterval(obj,flag){
var $this = $(obj);
var $parent = $this.parent();
//1, stop the timer
if(parseInt(flag)!=1){//Not 1, stop the timer
var curID = $parent.parent().attr("curID");
var timer = timerMap.get("curID"+curID);
//alert("Timer: "+timer);
window.clearInterval(timer);
}
//2, modify the startup state
$parent.parent().attr("sign","0");//1: already started 0-stop
//3, the state of the device button
// start button to start
enableLink($this.prev()[0]);
//The stop button is grayed out
disableLink(obj);
}
2. Multiple starts and stops :
/**
* This event is triggered when the "One Click Start" button is clicked, which is used to start the selected record
* **/
function startTheSelected(){
//1. Check the number of checks
var len = $("#"+tableName+">tbody>tr:gt(0)>td>input[type=checkbox]:checked").length;
if(len<=0){alert("Please check the game to start first");return false;}
//2. Cycle through each game in turn and call the start method to start
$("#"+tableName+">tbody>tr:gt(0)>td>input[type=checkbox]:checked").each(function(){
//var $tr = $(this).parent().parent();
startInterval($(this).parent().parent().children().eq(btnIndex).children().eq(startBtnIndex).get(0));//Call the start method to start
});
}
/**
* This event is triggered when the "One-click stop" button is clicked, which is used to stop the selected recording
* **/
function endTheSelected(){
//1. Check the number of checks
var len = $("#"+tableName+">tbody>tr:gt(0)>td>input[type=checkbox]:checked").length;
if(len<=0){alert("Please check the game you want to stop first");return false;}
//2, loop through each game in turn, call the stop method to stop
$("#"+tableName+">tbody>tr:gt(0)>td>input[type=checkbox]:checked").each(function(){
//3. Verify whether the "Start" button is disabled, that is, whether the countdown is started. If the "Start" button is enabled, it cannot be clicked.
var $a = $(this).parent().parent().children().eq(btnIndex).children().eq(startBtnIndex);//The a label where the start button is located
var isDisabled = $a.attr("disabled");
if(isDisabled!=undefined && (isDisabled==true || isDisabled.toString()=="true")){//The checked game is being started and can be stopped
endInterval($a.next().get(0),2);//Call the start method to start: pass the object of the stop button
}
});
}
3. Disable and enable A tags :
//Disable the click event of the A tag
function disableLink(link) {
//link.disabled = true;
link.setAttribute("disabled",true);
link.removeAttribute('href');
}
//Enable the click event of the A tag
function enableLink(link) {
link.setAttribute("disabled",false);
link.setAttribute("href","javascript:void(0);");
}
4. Rewrite of Map :
Because the timer is stored in the map when it is started, so that when it stops, it will know which one is stopped.
/*
* Map object, which implements the Map function
*
*
* size() Get the number of Map elements
* isEmpty() to determine whether the Map is empty
* clear() delete all elements of Map
* put(key, value) adds an element (key, value) to the Map
* remove(key) removes the element of the specified key, returns true if successful, false if failed
* get(key) Get the element value value of the specified key, if it fails, return null
* element(index) Get the element at the specified index (use element.key, element.value to get the key and value), if it fails, return null
* containsKey(key) Determines whether the Map contains the element with the specified key
* containsValue(value) Determines whether the Map contains the element with the specified value
* keys() Get the array of all keys in the Map (array)
* values() Get the array of all values in the Map (array)
*/
function Map() {
this.elements = new Array();
//Get the number of Map elements
this.size = function() {
return this.elements.length;
},
//Check if Map is empty
this.isEmpty = function() {
return (this.elements.length < 1);
},
// delete all elements of the map
this.clear = function() {
this.elements = new Array();
},
//Add elements (key, value) to the Map
this.put = function(_key, _value) {
if (this.containsKey(_key) == true) {
if (this.remove(_key) == true) {
this.elements.push( {
key : _key,
value : _value
});
}
} else {
this.elements.push( {
key : _key,
value : _value
});
}
},
//Delete the element of the specified key, return true on success, false on failure
this.remove = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
this.elements.splice(i, 1);
return true;
}
}
} catch (e) {
bln = false;
}
return bln;
},
//Get the element value value of the specified key, if it fails, return null
this.get = function(_key) {
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
return this.elements[i].value;
}
}
} catch (e) {
return null;
}
},
//Get the element of the specified index (use element.key, element.value to get the key and value), if it fails, return null
this.element = function(_index) {
if (_index < 0 || _index >= this.elements.length) {
return null;
}
return this.elements[_index];
},
//Determine whether the Map contains the element with the specified key
this.containsKey = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
},
/ / Determine whether the Map contains the element with the specified value
this.containsValue = function(_value) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].value == _value) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
},
//Get the array of all keys in the Map (array)
this.keys = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].key);
}
return arr;
},
//Get the array of all values in the Map (array)
this.values = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].value);
}
return arr;
};
}