Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2019, 12:31
Аспирант
Отправить личное сообщение для Jimy Посмотреть профиль Найти все сообщения от Jimy
 
Регистрация: 21.03.2019
Сообщений: 43

Как организовать паузу в выполнении кода?
Пытаюсь сделать простой таймер для обратного отсчета. Не могу разобраться с setTimeout(). Все равно цифры бегут со страшной скоростью.
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var canvasW=c.width;
var canvasH=c.height;
var starttimer=90;
var color='blue';
//таймер
var timer=function(x,y){
    this.x=x;
    this.y=y;
    
    //рисование таймера
    this.draw=function(){
        ctx.font="40px Times New Roman";
        ctx.textAlign='center';
        ctx.textBaseline="middle";
        ctx.fillStyle=color;
        ctx.fillText(starttimer,this.x,this.y);
        ctx.strokeStyle=color;
        ctx.lineWidth=3;
        ctx.beginPath();
        ctx.arc(canvasW/2,canvasH/2,30,0,Math.PI*2,false);
        ctx.stroke();
        //изменение таймера
  setTimeout(starttimer -=1,1000);
    };
            };
    //конец таймера

var Timer=new timer(canvasW/2,canvasH/2);
function animate(){
     ctx.clearRect(0,0,canvasW,canvasH);
     ctx.fillStyle="black";
     ctx.fillRect(0,0,c.width,c.height);
     ctx.fill();
    Timer.draw();
    requestAnimationFrame(animate);
};
animate();

Как правильно сделать? Пробовал вместо Timeout setInterval - почти тоже самое, нет задержки....
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2019, 13:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,013

canvas timer
Jimy,
делайте полноценный макет! а не кусок кода.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<canvas id="canvas" width=300 height="300" ></canvas>
<script>
 var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var canvasW=c.width;
var canvasH=c.height;
var starttimer=90;
var color='blue';
//таймер
var timer=function(x,y){
    this.x=x;
    this.y=y;
    this.t = performance.now();
    //рисование таймера
    this.draw=function(txt){
        ctx.font="40px Times New Roman";
        ctx.textAlign='center';
        ctx.textBaseline="middle";
        ctx.fillStyle=color;
        ctx.fillText(txt,this.x,this.y);
        ctx.strokeStyle=color;
        ctx.lineWidth=3;
        ctx.beginPath();
        ctx.arc(canvasW/2,canvasH/2,30,0,Math.PI*2,false);
        ctx.stroke();

    };
            };
    //конец таймера

var Timer=new timer(canvasW/2,canvasH/2);
function animate(b){
     ctx.clearRect(0,0,canvasW,canvasH);
     ctx.fillStyle="black";
     ctx.fillRect(0,0,c.width,c.height);
     ctx.fill();
     var timer = starttimer - (b - Timer.t)/1000;
     timer = Math.max(0, timer|0);
     Timer.draw(timer);
     timer && requestAnimationFrame(animate);
};
requestAnimationFrame(animate);

</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2019, 13:34
Аспирант
Отправить личное сообщение для Jimy Посмотреть профиль Найти все сообщения от Jimy
 
Регистрация: 21.03.2019
Сообщений: 43

Большое спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 15.11.2019, 14:04
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,708

Сообщение от рони
var Timer=new timer(canvasW/2,canvasH/2);
Это где так учат?!

рони, Jimy, а если разные таймеры?

<canvas id="canvas" width=300 height="300"></canvas>
<script>
	function Timer(canvas) {
		this.canvas = canvas;
		this.context = canvas.getContext("2d");
		this.x = canvas.width / 2;
		this.y = canvas.height / 2;
		this.counter = 90;
		this.lastTime = performance.now();
		this.animate();
	}

	Timer.prototype.draw = function draw() {
		var color = "blue";
		var ctx = this.context;
		ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
		ctx.fillStyle = "black";
		ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
		ctx.fill();
		ctx.font = "40px Times New Roman";
		ctx.textAlign = 'center';
		ctx.textBaseline = "middle";
		ctx.fillStyle = color;
		ctx.fillText(this.counter, this.x, this.y);
		ctx.strokeStyle = color;
		ctx.lineWidth = 3;
		ctx.beginPath();
		ctx.arc(this.canvas.width / 2, this.canvas.height / 2, 30, 0, Math.PI * 2, false);
		ctx.stroke();
	};

	Timer.prototype.animate = function animate(time) {
		requestAnimationFrame(this.animate.bind(this));
		
		if(time - this.lastTime >= 1000 && this.counter > 0) {
			this.counter--;
			this.lastTime = time;
			
			if(this.counter === 0 && "counterendCallback" in this)
				requestAnimationFrame(this.counterendCallback.bind(this));
		}
		
		this.draw();
	};
	
	var timer = new Timer(document.getElementById("canvas"));
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 15.11.2019, 14:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,013

Malleys,
this.counter а если не изменять этот параметр, чтоб можно было повторно использовать?
Ответить с цитированием
  #6 (permalink)  
Старый 15.11.2019, 14:21
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,708

рони, вы можете работать как с обычным объектом, никакой магии!
var timer2 = new Timer(document.getElementById("canvas-2"));
timer2.counter = 10;
timer2.counterendCallback = () => alert("Время истекло!");
Ответить с цитированием
  #7 (permalink)  
Старый 15.11.2019, 14:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,013

Malleys,
и почему нет остановки animate после this.counter === 0?
Ответить с цитированием
  #8 (permalink)  
Старый 15.11.2019, 14:29
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,708

Сообщение от рони
this.counter а если не изменять этот параметр, чтоб можно было повторно использовать?
Вы в плане того, чтобы запомнить изначальное значение? Я думаю, что counter должен хранить оставшееся время, так и так вам может понадобиться это значение из другого места. А если нужно начально значение, то я думаю, что можно добавить метод setTimer...

Timer.prototype.setTimer = function(value) {
    this.counter = value;
    this.initialCounter = value;
};
Ответить с цитированием
  #9 (permalink)  
Старый 15.11.2019, 14:31
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,708

Сообщение от рони
и почему нет остановки animate после this.counter === 0?
Потому что можно менять counter извне класса, особенно после добавления setTimer
Ответить с цитированием
  #10 (permalink)  
Старый 15.11.2019, 14:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,013

Malleys,
не особо понимаю зачем нужен setTimer и безостановочная долбёжка animate когда эта функция работает в холостую.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Просмоторщик 3d-моделей. Как организовать отдачу файлов с сервера? microb Серверные языки и технологии 4 25.03.2014 19:58
Как организовать выбор новости из списка (JavaScript + RSS or HTML парсер) Wolfak Общие вопросы Javascript 2 24.02.2014 12:08
как изментить функцию прямо из кода!! magavnuk Events/DOM/Window 2 27.12.2009 09:33
lightbox галлерея + комменты - как организовать? linderox Элементы интерфейса 0 02.06.2009 12:50
Как с помощью JS "на-лету" менять часть HTML кода greendoc Общие вопросы Javascript 2 18.03.2008 19:43