2

Есть код на JS, аналогичный эффекту fadeIn в jQuery. Некоторые моменты я не могу понять.

  1. var last = +new Date(); - что здесь означает +? Для чего он?
  2. el.style.opacity = +el.style.opacity + (new Date() - last) / 400; - аналогично и здесь: для чего нужен +?
  3. last = +new Date(); - здесь я тоже не могу понять назначение +
  4. if (+el.style.opacity < 1) - а здесь тем более...

function fadeIn(el) {
  el.style.opacity = 0;
  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}

fadeIn(el);

3
  • Представление объекта в численном виде: stackoverflow.com/questions/221539/… 4 окт 2017 в 5:26
  • А для style.opacity схожий принцип: style.opacity имеет тип string, а использование унарного + приводит string к number.
    – Regent
    4 окт 2017 в 5:32
  • перед new Date - не зачем
    – Grundy
    4 окт 2017 в 6:28

4 ответа 4

3

Согласно спецификации

Оператор "Унарный +" преобразует свой операнд к типу Number.

Для чего это нужно в коде в вопросе?

el.style.opacity - возвращает строку, поэтому при сложении ее с числом, это число было бы приведено к строке и произошла бы обычная конкатенация строк, например:

el.style.opacity = 1
el.style.opacity = el.style.opacity + 2 

значением el.style.opacity в данном случае будет "12", а не 3.


При этом, в случае с Date, можно опустить этот оператор, так как аргументы "оператора " и так будут приведены к числу. Но даже и этого не нужно, так как есть метод now(), который уже возвращает число.

Кроме того вместо расчета приращения прозрачности можно просто заново рассчитывать полное значение прозрачности и вообще убрать приведение к числу и не хранить последнее значение timestamp.

Исходя из этого, код можно переписать так:

function fadeIn(el) {
  el.style.opacity = 0;
  var start = Date.now();
  var tick = function() {
    el.style.opacity = (Date.now() - start) / 400;
    if (el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}

fadeIn(document.getElementById('a'));
#a {
  width: 100px;
  height: 100px;
  background-color: green;
}
<div id="a"></div>

Так как callback для requestAnimationFrame первым параметром принимает текущий timestamp, который соответствует значению возвращаемому performance.now() можно использовать его например так:

function fadeIn(el) {
  el.style.opacity = 0;
  var start = performance.now();
  var tick = function(timestamp) {
    el.style.opacity = (timestamp - start) / 400;
    if (el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}

fadeIn(document.getElementById('a'));
#a {
  width: 100px;
  height: 100px;
  background-color: green;
}
<div id="a"></div>

2

Плюс используется для преобразования к числовому типу.

"new Date()" (без плюса) - объект typeof(new Date()) => "object"

"+new Date()" - число typeof(+new Date()) => "number"

Преобразование к числу, унарный плюс +

2

+ перед значением используется для преобразования в число. Например:

var x = prompt("Введи число");
alert(typeof x);

Видно что x не является числом а строкой. Но стоит добавить + перед prompt как он скажет что наша переменная число.

var x = +prompt("Введи число");
alert(typeof x);

Еще одно применение это сложение строки и строки/числа

// не работает
alert("12"+"12")
//работает
alert(+"12"+12);
//работает
alert(+"12"+(+"12"));

1

Для преобразования к числу в явном виде можно вызвать Number(val), либо, что короче, поставить перед выражением унарный плюс "+", почитать подробнее про преобразования типов в JS можно в учебнике Кантора

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.