Форум

Narko · #1 (**permalink**) 23.08.2017, 15:55

Есть 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.

Спасибо всем.

j0hnik · #2 (**permalink**) 23.08.2017, 16:08

<!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>

Narko · #3 (**permalink**) 23.08.2017, 16:13

А подскажи, можно ли реализовать через вызов отдельной функции?

function message(num, id){
    var int = setInterval(function(){
        num--;
        if (num == 0) clearInterval(int);
        else id.innerHTML = num;
    },1000);
}

а сделать типо на подобие моей, чтобы отдельно функция была вывода и счетчика.

Narko · #4 (**permalink**) 23.08.2017, 16:15

у тебя внутри setInterval(ФУНКЦИЯ, 1000);
А сделать указатель на функцию, типо:

setInterval(PRO(), 1000);
function PRO()
{

}

j0hnik · #5 (**permalink**) 23.08.2017, 16:38

Сообщение от Narko

у тебя внутри setInterval(ФУНКЦИЯ, 1000);
А сделать указатель на функцию, типо:

setInterval(PRO(), 1000);
function PRO()
{

}

да по сути можно любую вложенность сделать, но вот только зачем? на написал самый простой вариант.

j0hnik · #6 (**permalink**) 23.08.2017, 16:40

Сообщение от Narko

у тебя внутри setInterval(ФУНКЦИЯ, 1000);
А сделать указатель на функцию, типо:

setInterval(PRO(), 1000);
function PRO()
{

}

setInterval(pro, 1000);
function pro()
{

}

Narko · #7 (**permalink**) 23.08.2017, 16:46

На подобии моей функции.
Не пробовал, хз прокатит или нет:

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,
и т.д.
};

т.к. на каждый клик, будет сбрасываться предыдущий таймер

Narko · #8 (**permalink**) 23.08.2017, 18:03

Даже если брать твой пример, то нажми 2 раза на кнопку, бред начинается. Функция выполняется 2 раза.
Как отслеживать, если функция уже нажата, то не выполнять новую функцию.

Narko · #9 (**permalink**) 23.08.2017, 18:20

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); - не работает, подскажите как исправить заодно...

j0hnik · #10 (**permalink**) 23.08.2017, 20:40

Сообщение от Narko

Даже если брать твой пример, то нажми 2 раза на кнопку, бред начинается. Функция выполняется 2 раза.
Как отслеживать, если функция уже нажата, то не выполнять новую функцию.

путей решения есть несколько. можно сделать нормальную кнопу и дизейблить ее.
или навешивать обработчик через 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>

Форум

Справочник

Discord чат

Курсы javascript