Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
7 / 8 / 3
Регистрация: 02.04.2018
Сообщений: 531

Некорректно работает функция sleep

18.02.2025, 12:24. Показов 2481. Ответов 28
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день. Не могу понять в чём дело. Узнал что в JS нет такой функции подобие delay

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

HTML5
1
2
3
<div id='run'>
 
</div>
CSS
1
2
3
4
5
6
7
#run {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: 500ms;
}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function sleep(milliseconds) {       
    const date = Date.now();        
    let currentDate = null;       
    do {               
       currentDate = Date.now();      
    } while (currentDate - date < milliseconds); 
} 
 
window.addEventListener("load", function(){
 
  let mgnTop = 0;
  let mgnLft = 0;
 
  mgnLft = 50;
  document.getElementById('run').style.marginLeft = mgnLft + 'px';
  
  sleep(500);
  mgnTop = 50;
  document.getElementById('run').style.marginTop = mgnTop + 'px';
 
});

по логике, для div блока применяется новый параметр смещающий стиль блока налево, далее пока идёт движение блока transition: 500ms, мы должны в теории замереть на это же время, и после чего дать команду на смещение (отступ сверху).

Но происходит странное, первый стиль не применяется, пока JS не выйдет из паузы, а когда он выходит, применяются сразу два стиля margin-top и margin-left из-за чего блок двигается не влево и вниз, а по диагонали.

Как замедлить программу JS чтобы не выполнять следующее смещение пока не закончится первое?

Можно конечно отслеживать document.getElementById('run').getProper tyValue('margin-top');
но зависать в while думаю плохая идея.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
18.02.2025, 12:24
Ответы с готовыми решениями:

Функция работает некорректно
Добрый день! Сделал функцию, которая должна удалить определённый символ в определённом тексте. Принцип работы: функция конкатенирует всё,...

Функция sleep
Доброго дня, подскажите пожалуйста. Имеется функция: function sleep(miliseconds) { var currentTime = new Date().getTime(); ...

работа с функцией, высчитывание разных суммы
вот бьюсь - никак не могу понять почему пишет значение не определено? &lt;html&gt; &lt;head&gt; &lt;script&gt; function...

28
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3854 / 1737 / 432
Регистрация: 14.03.2022
Сообщений: 4,414
19.02.2025, 18:59
Студворк — интернет-сервис помощи студентам
SergeyKagen, ты опять роешь подземный ход на чердак...
0
 Аватар для voraa
1295 / 1276 / 190
Регистрация: 21.01.2024
Сообщений: 5,911
19.02.2025, 19:50
Цитата Сообщение от SergeyKagen Посмотреть сообщение
у меня в CSS стилях прописан ID. Как его поменять через CSSOM? например с t-08-a-8 на t-08-a-5 ?
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ns - номер таблицы стилей (последовательный номер всех link и style)
const styleSheet = document.styleSheets[ns];  // Таблица стилей
 
// можно нужной таблице присвоить id
// <link id="idlink" .....>
// тогда
// styleShit = document.getElementById('idlink').sheet
 
// nr - номер правила в таблице
const rule = styleSheet.cssRules[nr]; // Правило
 
// Можно организовать поиск нужного правила, например по селектору
 
rule.selectorText.replace('t-08-a-8', 't-08-a-5') // меняем текст в селекторе
 
// удалить правило можно по его номеру styleSheet.deleteRule(nr)
Посложнее, чем с DOM, но многое можно. Просто доки почитать.

Добавлено через 3 минуты
   
CSS
1
2
3
4
5
6
7
8
/* QUESTION 8 */
    #div_5:has(#t-08-a-8:checked)>.slider  .results-q8 .check_0 {
        opacity: 0;
    }
 
    #div_5:has(#t-08-a-8:checked)>.slider  .results-q8 .check_O {
        opacity: 1;
    }
Классы .check_0 и .check_O - что бы запутаннее было?

Добавлено через 19 минут
Сори
Конечно строка 14 должна быть
JavaScript
1
rule.selectorText = rule.selectorText.replace('t-08-a-8', 't-08-a-5') // меняем текст в селекторе
Добавлено через 12 минут
Мне в реальных проектах такое требовалось только один раз.
И то, скорее всего, если крепко подумать, наверно можно было бы обойтись без этого.

Всегда же можно навешивать на элементы классы и менять их.
Можно использовать CSS переменные и меняя их менять значения.
Это проще.
0
7 / 8 / 3
Регистрация: 02.04.2018
Сообщений: 531
19.02.2025, 20:59  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
И то, скорее всего, если крепко подумать, наверно можно было бы обойтись без этого.
абсолютно согласен. Это вообще я делаю тест на html, и по задумке, если у человека отключен JS то этот тест всё равно будет работать.

То что в конце - это стиль прописанный по умолчанию, при правильном checked, но если JS включен то тест переходит в вариативную форму, т.е. рандомно меняются задания и ответы, и логично уже айди выбранного ответа будет другим, поэтому и нужно изменить именно айди в стилях через JS.


Цитата Сообщение от voraa Посмотреть сообщение
nr - номер правила в таблице
а как найти нужное правило в таблице? Это номер строчки или как?
0
7 / 8 / 3
Регистрация: 02.04.2018
Сообщений: 531
19.02.2025, 21:25  [ТС]
Походу всё, безопасность не даёт доступ к стилям.



0
 Аватар для voraa
1295 / 1276 / 190
Регистрация: 21.01.2024
Сообщений: 5,911
19.02.2025, 22:51
Цитата Сообщение от SergeyKagen Посмотреть сообщение
Походу всё, безопасность не даёт доступ к стилям.
А сервер, с которого грузятся стили, ваш?
Нельзя там попробовать CORS заголовки настроить?

Добавлено через 52 минуты
У меня получилось.
Если сервер вместе с файлом css посылает заголовок Access-Control-Allow-Origin "*", то все работает.
0
7 / 8 / 3
Регистрация: 02.04.2018
Сообщений: 531
20.02.2025, 06:04  [ТС]
так стоп, метод "selectorText.replace('t-08-a-8', 't-08-a-5')" изменяет стиль реально, а не виртуально?

Просто я думал что JS это клиентская сторона, т.е. стили загрузились к нему и JS просто это всё обрабатывает.

Я запускаю это без сервера, напрямую через браузер.
0
 Аватар для voraa
1295 / 1276 / 190
Регистрация: 21.01.2024
Сообщений: 5,911
20.02.2025, 07:18
Цитата Сообщение от SergeyKagen Посмотреть сообщение
изменяет стиль реально, а не виртуально?
Что значит реально и виртуально?
Когда браузер меняет что то в DOM, создает элемент, меняет его id, меняет положение... это реально или виртуально?
Конечно браузер меняет только у себя в памяти. Файлы он не меняет.
0
7 / 8 / 3
Регистрация: 02.04.2018
Сообщений: 531
20.02.2025, 08:23  [ТС]
ну вот я и об этом, зачем менять что-то на сервере, при изменении стиля в CSS путём JS, он же не обращается на сервер и не меняет файл у него, он меняет я так понял на клиентской стороне, в самом браузере. Ну да ладно. Эта ветка уже пошла куда-то не в ту сторону))) про функцию sleep я узнал) спасибо)
0
 Аватар для voraa
1295 / 1276 / 190
Регистрация: 21.01.2024
Сообщений: 5,911
20.02.2025, 10:48
Цитата Сообщение от SergeyKagen Посмотреть сообщение
Я запускаю это без сервера, напрямую через браузер.
Без сервера из локальной файловой системы много чего не работает.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
20.02.2025, 10:48
Помогаю со студенческими работами здесь

Некорректная работа с id в IE6/7
Есть форма, в зависимости от выбора Способа доставки в этой форме, для пользователя должны отображаться различные поля контактных данных. В...

Работа с функциями setInterval() и clearInterval()
Если у кого есть выложите пример работы с этими функциями. Если быть точнее интерисует вызов этих функций по несколку раз для разных...

Некорректная работа скрипта
Проблема в if var quantity= $(&quot;#numberOrderWhisky&quot;).val(); var quantityInDB= $(&quot;#quantityWhiskeyInDB&quot;).val(); var price =...

Некорректная работа скрипта
Сей скрипт плавного перехода между страницами $(document).ready(function() { $(&quot;body&quot;).css(&quot;display&quot;,...

Некорректная работа Javascript при прокрутке превью в галерее
Имеем фотогалерею. Создаются превью с прокруткой. При наведении мышки - дрожание превьюшек и отсутствие прокрутки как таковой. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
29
Ответ Создать тему
Новые блоги и статьи
19. здоровье, усталость и психотип работника влияют на производительность предприятия, и наоборот, производительность на здоровье, усталось и психотип
anaschu 28.05.2026
Дискретно-событийная модель рабочего коллектива на AnyLogic: здоровье, выгорание, психотипы и микростимуляция Привет, коллеги. Хочу поделиться итогами нескольких недель работы над симуляционной. . .
"Прокси" для последовательного порта
Eddy_Em 28.05.2026
Эту штуку написал я достаточно давно. Но сейчас вот понадобилось настроить датчик грозы, но при этом не отключать его от "метеодемона". Соответственно, надо запустить этот "прокси": метеодемон будет. . .
Рефакторинг программы уравнивания.
Massaraksh7 26.05.2026
Пример по предыдущей записи в блоге. Но, надо заметить, что, во-первых, там оптимизация не только математики, но и работы с базой данных, и с графами, а во-вторых, это ещё не всё.
Использование TThread в Lazarus для математических вычислений.
Massaraksh7 25.05.2026
Производя рефакторинг своих программ на предмет ускорения их работы, обратил внимание на такой аспект, как сокращение времени матвычислений. Дело в том, что приходится работать с большими матрицами. . .
Модель здравосохранения 18. Чем здоровее работник, тем быстрее выгорает
anaschu 24.05.2026
Имитационная модель корпоративного здравоохранения: что показывает математика Сегодня в модели рабочего коллектива на AnyLogic появились три новые механики — выгорание через накопленную усталость,. . .
Модель здравосохранения 17. Планы на выгорание
anaschu 23.05.2026
Вот конкретная схема реализации: В классе Работник добавить: накопленнаяУсталость — растёт каждый час работы, снижается в перерывы и болезни коэффициентПрезентеизма — снижает продуктивность. . .
Изменение цветов в палитре gif файла aka фавикона
russiannick 23.05.2026
Изменение цветов в палитре gif файла, юзаемого как фавиконка в составе html-файла, помещенная в base64, средствами нативного Java Script, навеянное сном в майский день. Для работы необходим браузер,. . .
Модель здравосохранения 16. Слишком хорошие и здоровые сотрудники уходят, недовольные зарплатой
anaschu 23.05.2026
Отладка увольнений и настройка производительности Сегодня во второй половине дня разобрались с механикой увольнений и настроили коэффициент сложности заданий. Вот что было сделано. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru