Почему этот полукружок не растет?

В принципе, У меня есть два полукруга. Один (круг0) имеет постоянный радиус, а внутренний полукруг (circle1, с градиентом) имеет переменный радиус. circle1 имеет начальное значение 1% радиуса окружности 0.Почему этот полукружок не растет?

Я хочу ввести значение в поле назначения (0-100) для нового радиуса круга1. Я установил интервал в 100 мс для 1% -ного шага в радиусе круга1, чтобы показать, что он растет, но он, похоже, не работает. Я не очень хорошо разбираюсь в javascript/jquery, но любая помощь очень ценится.

Смотрите демо здесь: https://jsfiddle.net/nilerafter24/ma845o6d/3/

Вот мой JavaScript:

$(document).ready(function() { 
    function circle_set(delta) { 
     if (!delta) { 
      return false; 
     } else { 
      var e = document.querySelectorAll('circle[id^=circle]'); 
      var radius0 = parseInt(e[0].getAttribute('r'), 10); 
      var radius1 = parseInt(e[1].getAttribute('r'), 10); 
      var currentRadius = (delta/100) * 50; 

      if (currentRadius <= radius0) { 

       setTimeout(function() { 
        if (radius1 <= currentRadius) { 
         radius1++; 
         e[1].setAttribute('r', String(radius0) + "%"); 
        }, 
       }, 100); 
      } 
     } 
    } 

    var inputTargetButton = document.getElementById('executeTarget'); 
    var inputTargetValue = document.getElementById('setTarget'); 

    if (inputTargetButton.type == 'button') { 
     inputTargetButton.onclick = function() { 
      circle_set(inputTargetValue.value) 
     } 
    } 
});

Edit: Исправлено большое mistake.Changed radius0 к Радиус1. Вам нужно больше кофе.

источник

2016-05-18 Emmanuel N K

У вас отсутствует '' 'before', 100);' в вашем тайм-ауте –

Кроме того, условие (radius0 <= currentRadius) не работает .... Я запутался с условием ur. first Если true, то второй, если должен быть неудачным, является взаимным. что такое currentRadius. – nisar

@nisar currentRadius - это то, что пользователь вводит в Targetbox. radius0 всегда меньше, чем currentRadius, потому что это радиус. Отсутствует условие отказа. этот код просто не запускается, если он не отвечает условиям. –

Вы должны использовать setInterval для своей функции, а также ваши условия являются неправильными. работа эта JsFiddle

setInterval(function() { 
    if (radius1 <= currentRadius) { 
     radius1++; 
     e[1].setAttribute('r', String(radius1) + "%"); 
    } 
}, 100);

источник

2016-05-18 06:33:04 nisar

Во-первых, что у вас есть увеличение радиуса большего полукруга, radius0. Вы хотите увеличить radius1 и применить это к circle1.

Второе, что setTimeout() будет вызывать функцию только один раз. Вам нужно использовать setInterval() для вызова функции каждые 100 мс. Но, так как вы не хотите, чтобы продолжить звонить после того, как радиус достиг currentRadius, вы должны очистить его в этой точке с помощью clearInterval():

if (currentRadius <= radius0) { 
    var timer = setInterval(function() { 
     if (radius1 <= currentRadius) { 
      radius1++;     
      e[1].setAttribute('r', String(radius1) + "%"); 
     } 
     else { 
      clearInterval(timer); 
     } 
    }, 100); 
}

Проверить эту рабочую скрипку: https://jsfiddle.net/q4ns6q0m/1/

источник

2016-05-18 06:33:06 digglemister

Этот ответ также верен. Я выбрал Нисара только потому, что он пришел первым. Спасибо хоть. Эта проблема заставила меня чесаться часами. Я использовал setTimeout раньше, чтобы вызывать функцию через интервалы, но я думаю, что в этом случае у меня была другая функция времени, чтобы вызвать обратный вызов, поэтому я запутался. –

Вы знаете, что они говорят, сначала лучше, чем лучше. – digglemister

Из того, что я в этом коде:

if (radius0 <= currentRadius) { 
    radius0++; 
    e[1].setAttribute('r', String(radius0) + "%"); 
    }, 
}

Условие if никогда не выполняется.

источник

2016-05-18 06:55:04 Ciprianis

Почему этот полукружок не растет?

ответ

Смежные вопросы