Одна функция
Есть 2 кнопки:
<span id="pro" onclick="message('1000', this);">Кнопка</span>
<span id="pro1" onclick="message('1000', this);">Кнопка</span>
При нажатии на кнопку, должен начаться счётчик от указанного: "1000", до 0 в текущем <span> (который был нажат). Вот JS код:
var message = function(num, id) {
var e = {
'totalQ' : 0,
'elemDiv' : null,
start : function(num, id)
{
this.elemDiv = id;
this.totalQ = num;
window.setInterval("timerSE()", 1);
},
timerSE : function()
{
if(this.totalQ != 0)
{
this.elemDiv.innerHTML = this.totalQ;
this.totalQ--;
}
else
{
return;
}
}
};
e.start(num, id);
};
Но нечего не работает, делал немного иначе, он считал, но при нажатии на 2 кнопку, он переставал считать на 1ой кнопке и начинал считать на 2ой. Мне нужно, чтобы они вне зависимости друг от друга считали, по одной функции, без использования jQuery. Спасибо всем. |
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span id="pro" onclick="message('1000', this);">Кнопка</span>
<span id="pro1" onclick="message('1000', this);">Кнопка</span>
<script>
function message(num, id){
var int = setInterval(function(){
num--;
if (num == 0) clearInterval(int);
else id.innerHTML = num;
},1000);
}
</script>
</body>
</html>
|
А подскажи, можно ли реализовать через вызов отдельной функции?
function message(num, id){
var int = setInterval(function(){
num--;
if (num == 0) clearInterval(int);
else id.innerHTML = num;
},1000);
}
а сделать типо на подобие моей, чтобы отдельно функция была вывода и счетчика. |
у тебя внутри setInterval(ФУНКЦИЯ, 1000);
А сделать указатель на функцию, типо:
setInterval(PRO(), 1000);
function PRO()
{
}
|
Цитата:
|
Цитата:
function pro() { } |
На подобии моей функции.
Не пробовал, хз прокатит или нет:
var message = function(num, id) {
var e = {
'totalQ' : 0,
'elemDiv' : null,
start : function(num, id)
{
this.elemDiv = id;
this.totalQ = num;
var test = this;
window.setInterval("test.timerSE", 1);
},
timerSE : function()
{
if(test.totalQ != 0)
{
test.elemDiv.innerHTML = test.totalQ;
test.totalQ--;
}
else
{
return;
}
}
};
e.start(num, id);
};
Почему именно в отдельной функции и в том виде котором я написал, чтобы хранить и другие данные. Такие как: total, elemDiv и т.д. Я написал, простой вариант, а хочу сложный, где будет храниться другая инфа для каждой нажатой кнопки. Через переменную, не вариант. Типо: var message = { 'total' : 0, и т.д. }; т.к. на каждый клик, будет сбрасываться предыдущий таймер |
Даже если брать твой пример, то нажми 2 раза на кнопку, бред начинается. Функция выполняется 2 раза.
Как отслеживать, если функция уже нажата, то не выполнять новую функцию. |
var message = function(num, id) {
var e = {
'totalQ' : 0,
'elemDiv' : null,
start : function(num, id)
{
this.elemDiv = id;
this.totalQ = num;
var test = this;
var pro = function(){
if(test.totalQ >= 100)
{
test.elemDiv.innerHTML = test.totalQ;
test.totalQ--;
}
else
{
clearInterval(this);
}
};
window.setInterval(pro, 1);
}
};
e.start(num, id);
};
clearInterval(this); - не работает, подскажите как исправить заодно... |
Цитата:
или навешивать обработчик через addEventListener чтобы потом его можно было удалить
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span id="id1">Кнопка</span>
<span id="id2">Кнопка</span>
<script>
function message(num, id){
var int = setInterval(function(){
num--;
id.innerHTML = num;
if (num == 0) clearInterval(int);
},1000);
}
document.querySelector('#id1').addEventListener('click', function(e) {
message(1000, e.target);
this.removeEventListener(e.type, arguments.callee);
}, false);
document.querySelector('#id2').addEventListener('click', function(e) {
message(1000, e.target);
this.removeEventListener(e.type, arguments.callee);
}, false);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:26. |