• Работа с таймером js?

    Stalker_RED
    @Stalker_RED
    card.addEventListener('click', flipCard);
    card.addEventListener('click', clickTimer);
    card.timer = null;
    
    function clickTimer() {
      if (!card.timer) { // если таймера еще нет
        card.timer = setTimeout(function(){ // добавляем таймер
          // после окончания
          card.timer = null // можно будет навесить новый таймер
          // do something
        }, 100500) // 1m 40.5 sec
      }
    }
    Ответ написан
    Комментировать
  • Какие кавычки следует использовать в массиве и почему?

    dubr
    @dubr
    пыхарь
    1) Решительно пофигу, где используются кавычки - в массиве или где-то еще. При обращении к индексу массива $a["key"] в квадратные скобки попадает выражение "key", состоящее из одного строкового литерала. Кавычки - это не часть магии, достающей что-то из массива =) Так тоже можно:

    $a = ['key' => 'val'];
    $k = "key";
    
    // вау! вот это магия!!!
    echo $a[$k]; 
    
    // просто невероятно!
    echo $a[ strrev('ek') . substr($k, -1, 1) ];


    2) По поводу "одинарные быстрее работают": надо понимать, за счет чего они "работают быстрее". Пхп пытается найти в них переменные и специальные последовательности типа \n при разборе скрипта. То есть один раз в самом начале, а не каждый раз, когда выражение исполняется. То есть:

    for ($i = 0; $i < 100500; $i++) {
    	$b = $a["key"];
    }


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

    3) И я вот решил наконец выяснить, какая она, это разница =)

    <?php
    $s = 'return count([';
    
    ini_set('memory_limit', '900M');
    
    $rands = [];
    $num = 1000000;
    $quot = '"';
    
    // я турбо-кавычка!
    // $quot = "'"; 
    // ^ ^ ^ ^ ^
    // раскомментируй меня и почувствуй настояющую скорость!
    
    for ($i = 0; $i < $num; $i++) {
        $s .= $quot. md5( rand(100000000, 999999999) . rand(100000000, 999999999) ).$quot.' => 1';
        if ($i !== $num - 1) {
        	$s .= ',' ;
        }
    }
    $s .= ']);';
    
    // получилось строка:
    // return count(['a' => 1, 'b' => 1, ... 1kk раз ])
    
    $start = microtime(true);
    // вот тут будет работать парсер
    eval($s);
    
    // например, 1.4128859043121 сек.
    echo (microtime(true) - $start) . " сек.";


    Мы генерим строку с кодом, который создает массив с миллионом ключей, каждый ключ - md5 от двух случайных чисел. eval запускает парсер и он типа 1.4128 сек отрабатывает.

    Теперь раскомментируем одинарную кавычку, и видим... 1.2484261989594 сек.! То есть разница в 0.16 с на дичайшем и нереальнейшем примере =) Повторим 100 раз, у меня получилось в среднем 0.12 сек. в пользу одинарных. Это на маке с php 5.6. Погонял на VPS с php 7 - там разница 0.36 сек, но между отдельными замерами одинакового способа разброс получается сильно больше этих 0.36, так что не показательно.

    4) Поэтому ориентироваться на "быстродействие" надо в последнюю очередь. На возможность вставлять переменные внутрь двойных кавычек ориентироваться тоже не надо, потому что так делать плохо, потому что читать сложнее, хорошо - закрыть кавычку, поставить точечку и дальше уже доллар (как эс) =)

    В первую очередь надо ориентироваться на вероятность появления переносов строки, которые могут возникнуть в этой строке. Во вторую - на вероятность появления собственно кавычки одного из типов, потому что экранирование снижает читаемость (особенно если это регулярка, где сам слеш тоже надо экранировать). В остальных случаях можно юзать любую, но желательно одну и ту же. Например одинарную, потому что ее на клавиатуре нажимать удобнее =)
    Ответ написан
    Комментировать
  • JavaScript:как прочитать/вывести содержимое xml-файла по URL-ссылке?

    Kozack
    @Kozack Куратор тега JavaScript
    Thinking about a11y
    fetch('http://file.xml').then(console.log)
    Ответ написан
    Комментировать
  • Какую книгу по SEO посоветуете?

    сео от а до я, бесплатная и актуальная
    Ответ написан
    Комментировать
  • При удалении элемента массива скрипт начинает работать неправильно?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Ну, очевидно же - не надо полагаться на чётность счётчика. Да ещё и выглядит оно стрёмно, код-то для обоих случаев почти одинаковый. Можно положить картинки в массив, и на каждом шаге делать ему reverse. И вместо обращения к картинкам непосредственно - обращаться к элементам массива. Типа так.
    Ответ написан
    1 комментарий
  • Как правильно установить и удалить setInterval?

    Xuxicheta
    @Xuxicheta
    инженер
    простой тест в jsfiddle
    window.onfocus = () => console.log('focus');
    window.onblur = () => console.log('blur');

    сворачиваем/разворачиваем - ничего не присходит.
    Ответ написан
    2 комментария
  • Как правильно установить и удалить setInterval?

    @GreatRash
    В песочнице код выполняется во фрейме, соответственно window ссылается не на верхнее окно браузера, а на окно фрейма. А оно не блюрится. Можно проверить написав туда alert, есть мнение, что он не всплывёт.
    Ответ написан
    6 комментариев
  • Как удалить комментарий в Phpstorm?

    abler98
    @abler98
    Software Engineer
    Комментировать
  • Скрипт работает неправильно после присвоении значения переменной, поможете?

    Stalker_RED
    @Stalker_RED
    Для начала, разобраться зачем там столько глобальных переменных. Они там вообще не нужны, ни одна из них не должна быть глобальной.
    Зачем-то каждую секунду вычисляются неиспользуемые данные, типа day, year, и какой-то rest (это что вообще?)
    Зачем-то каждую секунду заново ищутся dom-элементы таймера.
    can, han, spAnim, alignT - как это расшифровать? Может комментарии есть? А нет, показалось.

    А как бы вы написали такой скрипт, в общих чертах?

    Для начала таймер попроще
    function countdown(dateStr, display) {
      let targetDate = new Date(dateStr).getTime()
      let timer = setInterval(function() {
        let now = new Date().getTime(),
            diff = targetDate - now;
    
        let hours = Math.floor((diff % 86400000) / 3600000),
            minutes = Math.floor((diff % 3600000) / 60000),
            seconds = Math.floor((diff % 60000) / 1000);
    
        document.body.innerHTML = `${hours}:${minutes}:${seconds}`
      })
    }
    
    
    countdown('2033-02-10 00:00:00')
    https://jsfiddle.net/7uhexr41/
    Затем отформатировать для вывода посимвольно
    var symbols = [...document.querySelectorAll('.symbol .cur')]
    function show(h, m, s) {
      var timeString =
          h.toString().padStart(2, '0')	+
          m.toString().padStart(2, '0') +
          s.toString().padStart(2, '0');
    
      symbols.forEach((symbol, i) => symbol.textContent = timeString[i])
    }
    https://jsfiddle.net/4hnxrrrt/
    Меняем значение на дисплее и запускаем css анимацию
    function animate(curSymbol, newValue) {
      let currentValue = curSymbol.textContent
      if (currentValue !== newValue) { // animated change
    		let parent = curSymbol.parentNode
        parent.classList.remove('anim')
        curSymbol.textContent = newValue
      	curSymbol.nextElementSibling.textContent = currentValue
        var foo = parent.offsetWidth; // reflow hack
        parent.classList.add('anim')
      }
    }

    Осталось собрать все вместе, добавить остановку при достижении нуля и коллбек по завершению
    https://jsfiddle.net/Stalk/5u6dmpqs/
    и немножко переписал форматирование
    Ответ написан
    2 комментария
  • Скрипт работает неправильно после присвоении значения переменной, поможете?

    @ksnk
    Там ошибок более чем дофига. Некоторые объясняются тем, что анимация накладывается друг на друга. предыдущая анимация должна быть прекращена с помощью оператора stop перед применением.
    Мрачное вычисление строкового значения времени в функции timeZ можно сократить до 2-3 строк, если вспомнить про функцию toTimeString
    Ответ написан
    4 комментария
  • Полная загрузка страницы jQuery?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    От сердца отрываю. Прелоадер нужно поместить сразу после открывающего body, чтобы не проскакивали незагруженные части страницы перед показом прелоадера.
    Всё в одном блоке, чтобы удобней было ставить и удалять его при необходимости и стили, скрипты работали более корректно.
    <!-- preloader -->
        <style type="text/css">
            .preloader_bg { position: fixed; background: rgba(15,15,15,1); width: 100%; height: 100%; top: 0; left: 0; z-index: 200; }
            .preloader_content { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 201; font-size: 14px; }
            .preloader_content span { display: block; margin: auto; text-align: center; text-transform: uppercase; color: rgba(225,225,225,1);}
        </style>
        <script type="text/javascript">
        $(function(){
            $('.preloader_bg, .preloader_content').fadeIn(0);
            $(window).load(function(){
                $('.preloader_bg').delay(250).fadeOut(1500);
                $('.preloader_content').delay(250).fadeOut(750);
            });
        });
        </script>
        <div class="preloader_bg"></div>
        <div class="preloader_content">
            <span>Идет загрузка...<br>Подождите...</span>
        </div>
        <noscript>
            <style>
                html, body { opacity: 1 !important; }
                .preloader_bg, .preloader_content { display: none !important; }
            </style>
        </noscript>
        <!-- /preloader -->
    Ответ написан
    4 комментария