Почему возникает ошибка Uncaught TypeError : draw is not a function at .?

@AlexKOR5 · Регистрация: 15.02.2019

Студворк — интернет-сервис помощи студентам

Почему возникает ошибка Uncaught TypeError : draw is not a function at ...?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let init = ()=>{
  wrapper = document.querySelector('.inner-box');
  Box = document.getElementById('Box');
  Box.onclick = ()=>{
    animate(draw,2000);
  }
  
 
}//end of init
let animate = (draw,duration)=>{
  let start = performance.now();
  requestAnimationFrame((time)=>{
    let timePassed = time - start;
    if(timePassed > duration){
      timePassed = duration;
    }
    draw(timePassed);
    if(timePassed < duration){
      requestAnimationFrame(animate);
    }
  });
}
let draw = (timePassed)=>{
  Box.style.left = timePassed/5 + 'px';
}
 
 
window.addEventListener('load', init, false);

HTML5
1
2
3
<div class="inner-box"> 
        <div id="Box"class="box">1</div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
.inner-box{
    width:100%;
    height:204px;
    border:2px solid brown;
    position: relative;
}
.box{
    width:200px;
    height:200px;
    background-color: cornflowerblue;
    border:3px solid black;
    cursor: pointer;
    position: absolute;
    top:0px;
    left:0px;
}

@Peskova_Sveta · 07.08.2020, 07:23

в строках 10 и 23 одинаковые имена, внутри функции аргумент имеет приоритет перед внешней переменной в случае совпадения имен

@AlexKOR5 · 07.08.2020, 08:46 **[ТС]**

Непонятно.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let animate = (d,duration)=>{
  let start = performance.now();
  requestAnimationFrame((time)=>{
    let timePassed = time - start;
    if(timePassed > duration){
      timePassed = duration;
    }
    d(timePassed);
    if(timePassed < duration){
      requestAnimationFrame(animate);
    }
  });
}
let draw = (timePassed)=>{
  Box.style.left = timePassed/5 + 'px';
}

@j2FunOnly · 07.08.2020, 09:21

AlexKOR5, проблема тут

JavaScript
18
19
20
    if(timePassed < duration){
      requestAnimationFrame(animate);
    }

Вы в requestAnimationFrame просто передаёте функцию, и внутри этой функции параметр draw будет DOMHighResTimeStamp

The callback method is passed a single argument, a DOMHighResTimeStamp, which indicates the current time when callbacks queued by requestAnimationFrame() begin to fire. Multiple callbacks in a single frame, therefore, each receive the same timestamp even though time has passed during the computation of every previous callback's workload. This timestamp is a decimal number, in milliseconds, but with a minimal precision of 1ms (1000 µs).

requestAnimationFrame()

А duration будет undefined.

Решение?

JavaScript
18
19
20
    if(timePassed < duration){
      requestAnimationFrame(() => animate(draw, duration)); // timeStamp => animate(draw, duration), но `timeStamp` у вас нигде не используется, можно пропустить
    }

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@Peskova_Sveta 409 / 162 / 32 Регистрация: 26.11.2019 Сообщений: 434
	07.08.2020, 07:23
	в строках 10 и 23 одинаковые имена, внутри функции аргумент имеет приоритет перед внешней переменной в случае совпадения имен 1