Проблема с SetTimeout

@Turbina_trista · Регистрация: 28.06.2017

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

Доброго времени суток. Недавно начал изучать JS. Есть такой небольшой код:

JavaScript
1
2
3
4
5
6
7
$(document).ready(function() {
    $('.load_more-btn').click(function() {
        this.style.width = "50px";  
                this.innerHTML = "";    
            setTimeout(this.style.width = "100px", 3000);
    });
});

По задумке данный код должен уменьшить на 3 секунды кнопку, а затем вернуть ее в исходное положение, но к сожалению он сразу возвращает кнопку в исходное положение (то есть с виду ничего не происходит, только удаляется надпись в кнопке). Будьте добры, подскажите - в чем ошибка?

Qwerty_Wasd · 25.10.2018, 02:51

Turbina_trista,

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

в чем ошибка?

в неправильной передаче параметров в setTimeout и неправильном понимании области видимости - https://codepen.io/qwerty_wasd/pen/gBQjVg

JavaScript
1
2
3
4
5
6
7
$(document).ready(function() {
  $('.load_more-btn').click(function() {
    var self = this;
    self.style.width = "50px";
    setTimeout(function(){self.style.width = "100px"}, 3000);
  });
});

@amr-now · 25.10.2018, 11:10

Turbina_trista, есть хорошая практика при манипуляции с вложенными функциями не надеяться на this.
this надежен в нестатических методах класса при обращении к свойствам экземпляра,
и если не во вложенной функции обратиться в обработчике события.

Но такая надежность не во всех случаях.

Проще не надеяться на this, а обращаться к элементам HTML другими способами. Например, так:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <input type="button" id="load_more-btn" value="Ок" />
    <script>
        var lmb = document.getElementById("load_more-btn");
        lmb.onclick = (function () {
            lmb.style.width = "50px";
            lmb.value = "Ожидание";
            setTimeout(function () { lmb.style.width = "100px"; lmb.value = "Ок"; }, 3000);
        });
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы 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 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .