Задать вопрос
lazalu68

Kovalsky

Salmon
Комментарии

  • Как захватить цвет?

    lazalu68
    @lazalu68
    Захват цвета это вроде бы дико сложная задача, вот гляньте на попытку реализации - https://html2canvas.hertzen.com/documentation.html, а это реализация захвата цвета из одной картинки - jsfiddle.net/thirtydot/9SEMf/869

    В данный момент наверное нет реально работающих сервисов способных такое сделать.
    Написано

  • Что это за синтаксис?

    lazalu68
    @lazalu68
    Ну, видать PHPStorm не умеет в ECMAScript 2015 на должном уровне, Игорь вам скинул пример аналогичного кода использующего классический синтаксис, такой конечно без ошибок везде пройдет; а если будете передавать стрелочные функции как аргументы, наверное всегда будет такой warning в PHPStorm.
    Написано

  • Как настроить событие на элемент отслеженный getElementsByClassName???

    lazalu68
    @lazalu68
    По ошибке все просто: весь ваш код выполняется сразу же, ни одна из частей кода не ждет другую. А поскольку ваш скрипт завершает работу только спустя некоторое время, в последней части кода вы пытаетесь выбрать селектором элементы которых еще нет, а именно document.getElementsByClassName("section-span") не находит нужных элементов, потому что в момент его выполнения структура элемента body такая: 

    <body>
	<div id="block">
		...
		<div class="section" id="section-%number%">

		</div>
		...
	</div>
</body>


    То есть в момент вызова функции document.getElementsByClassName("section-span") на странице есть только div#block с пустыми секциями; заполнены элементами span.section-span они будут позже.
    Исправить это не исправляя основной код можно добавив лишнюю проверку к функции intervalOutputing, а именно после того, как колонка заполнена, проверять последняя ли это колонка, и если да, то выполнять ваш код. Вот рабочий пример.

    Но логичней было бы подправить имеющийся алгоритм и потом уже добавлять туда обработчики, поэтому я все же советую вам разобрать все ошибки вашего кода, т.к. некоторые из них достаточно мощные, стоит залатать пробелы. Но впрочем как хотите, дальше можете не читать)

    Для начала раскидайте ваш код так, как этого хочет jsfiddle: весь css код - в окошко CSS, весь html код - в html, и js - в js.
    Получится так.

    У вас в функции setContent опечатка: вы присваиваете значение this.innerHTMl, когда у элемента this нет такого свойства. Этому элементу будет добавлено свойство innerHTMl. Зато у этого элемента есть свойство innerHTML xD То есть вы ошиблись в последнем символе, а поскольку JS регистрозависим, то это критический логический баг.

    У вас есть переменная makingColumsInterval, вы в нее кладете идентификатор, который вам возвращает функция setTimeout(). В том же месте у вас объявлена именованная функция rekurs() в которой столько ошибок, что работоспособность вашего кода я назвал бы чудом) Эта функция просто нерабочая. Вот эта часть кода:

    var makingColumsInterval = setTimeout(function rekurs(){
 	 	if(randNumbersArray.length === columQty){
    	    clearTimeout(makingColumsInterval);
	    }
		var randomNum = getRandomNum(1, columQty);

		if(randNumbersArray.indexOf(randomNum) === -1) {
			randNumbersArray.push(randomNum);
			outputNumbers("section-" + randNumbersArray[randNumbersArray.length - 1]);
		}
		var makingColumsInterval = (rekurs(),100);
},100);


    1. В строке "var makingColumsInterval = (rekurs(),100);" туча ошибок: для начала вы объявляете переменную makingColumsInterval через ключевое слово var, таким образом делая ее видимой только внутри функции rekurs() во время её выполнения. А ведь ваша функция рассчитана на то, чтоб использовать внешнюю переменную makingColumsInterval. Потом в этой же строке вы пропустили 'setTimeout': хотели написать 'setTimeout(rekurs(),100)', а написали '(rekurs(),100)' (кстати, даже если бы вы не пропустили 'setTimeout', все равно все бы обрушилось, ибо скобки после имени функции означают ее немедленный вызов, а тогда функция setTimeout первым аргументов бы получила undefined, что привело бы к ошибке). Таким образом запись в переменную makingColumsInterval уже начата (то есть ссылка на внешнюю переменную makingColumsInterval уже стерта), но не закончена, т.к. rekurs() никогда не завершается. То есть завершается, но принудительно браузером. Поэтому rekurs() не видит внешнюю переменную makingColumsInterval, зато видит недоделанную внутреннюю, которая ввиду своей недоделанности равна undefined. Если бы вы заглянули в консоль, вы бы увидели, что ваш скрипт выполняется больше хрентиллиона раз, а потом аварийно вырубается.

    Читайте эту статью про области видимости.

    2. Теперь об этой части кода:

    if(randNumbersArray.length === columQty){
	clearTimeout(makingColumsInterval);
}


    Видимо предполагалось, что этот if должен остановить выполнение функции, но по факту происходит вот что: сравниваются значения переменных randNumbersArray.length и columQty, если они равны - чистится таймаут и продолжается выполнение функции, а если не равны, то чистка таймаута пропускается, а функция продолжает выполняться. Блок, который выполняется условным оператором if, никак не влияет на ход функции, и в итоге функция выполняется пока браузер не остановит ее, выдав ошибку too much recursion. Исправить это можно добавив после чистки таймаута инструкцию 'return;'

    В целом ваша функция использует странную логику - она выполняется, потом создает еще раз отложенный вызов самой себя и так до тех пор, пока randNumbersArray.length не станет равен columQty. Вместо setTimeout можно использовать setInterval - первый аргумент у него это функция которая будет выполняться каждый промежуток времени, заданный вторым аргументов. Если бы вы использовали setInterval, вам бы пришлось создать и очистить интервал всего раз.

    После исправлений ваша функция стала выглядеть вот так:

    makingColumnsInterval = setInterval(function (){
    if(randNumbersArray.length === columQty){
        clearInterval(makingColumnsInterval);
        return;
    }
    var randomNum = getRandomNum(1, columQty);

    if(randNumbersArray.indexOf(randomNum) === -1) {
      randNumbersArray.push(randomNum);
      outputNumbers("section-" + randNumbersArray[randNumbersArray.length - 1]);
    }
}, 100);


    Далее: в функции intervalOutputing когда количество добавленных span'ов равно пятидесяти, вы вызываете функцию afterOutput, которая в свою очередь выполняет сама себя каждые десять секунд, и не чистит за собой таймаут.
    Функция afterOutput судя по логике общего и своего собственного алгоритма (и даже по ее названию) рассчитана на то, что она будет вызвана не после того, как заполнится колонка, а после того, как будут заполнены все колонки, то есть вызвана она будет всего раз. Таким образом 1) можно смело удалять из нее setTimeout, 2) можно было бы исключить ее из intervalOutputing, но ввиду того что на заполнение колонки уходит время (следовательно заполнение цифрами можно считать оконченным не когда алгоритм приступит к заполнению последней колонки, а когда последняя колонка будет заполнена) придется ее оставить там и выполнять только когда myI === 50 и randNumbersArray.length === columQty.

    Вот вам исправленная версия.
    Написано

  • Как настроить событие на элемент отслеженный getElementsByClassName???

    lazalu68
    @lazalu68
    Umid:
    Если вы имеете ввиду зачем вписывать false если useCapture и так по дефолту будет равен false, то да, в некоторых случаях можно обойтись без него, т.к. вызов addEventListener('click', handler) аналогичен вызову addEventListener('click', handler, false). Но в некоторых случаях из удобства (и не только) этот аргумент не опускается. Например, у меня в примере: чтобы вешать обработчики я использую и true, и false значения useCapture, поэтому чтобы снимать обработчики, мне нужно различать обработчики на те которые используют capture, и те которые не используют, ибо если на элемент повешены обработчики обоих типов:

    el.addEventListener('click', handler, false);
el.addEventListener('click', handler, true);

    ...то снять все обработчики с useCapture=true можно будет только явно указав useCapture=true в функции removeEventListener, и например такой код не уберет все обработчики: 

    el.removeEventListener('click', handler);
el.removeEventListener('click', handler);

    ...зато такой уберет:

    el.removeEventListener('click', handler, false);
el.removeEventListener('click', handler, true);

    А если вы имеете ввиду что не видите смысла в использовании capture режима, то тут я могу сказать только то, что если вы не видите как можно применить фичу, то она для вас наверное и впрямь бесполезна, и станет полезной только тогда, когда вы наткнетесь на необходимость использовать ее. Не знаю, какой пример вам дать, чтоб вы убедились в том, что эта фича полезна. Ну например если при клике на какие-то элементы нам сначала нужно вызвать обработчик родительского элемента, то у родителя useCapture должен быть true, а у элементов внутри него - false.
    Написано

  • Как получить ключ объекта в js?

    lazalu68
    @lazalu68 
    obj = { 'key': [ 1, 2, 3, 4, 5 ], 0: 'somevalue', 1: 564}

keys = Object.keys(obj)

for (var i = 0, l1 = keys.length; i < l1; i++) {
	if ( isNaN(parseInt(keys[i])) ) {
		for (var j = 0, arr = obj[keys[i]], l2 = arr.length; j < l2; j++) {
			console.log(arr[j]);
		}
	}
}


    То есть если у вас в объекте есть элементы имеющие и числовые и текстовые ключи, то вы можете выбрать те, у которых ключи текстовые, и работать только с ними.
    Написано

  • Как настроить событие на элемент отслеженный getElementsByClassName???

    lazalu68
    @lazalu68
    Umid:
    Функции jQuery рассчитанные на модификацию элементов DOM умеют автоматически определять что в них передано - один элемент или массив. На самом деле все не так просто, но сильно упрощенно это выглядело бы так:

    function on(arg, function_to_apply)  {
	if (Array.ifArray(arg)) {
		for (i = 0; i < arg.length; i++ ) {
			function_to_apply( arg[i] );
		}
	} else {
		function_to_apply( arg );
	}
}


    Если в функцию передан один элемент, то эта функция выполняется только для него, а если передан массив элементов, то функция выполняется для каждого элемента в массиве. Конструкция $('.asd').on('click', handler) вешает обработчик на все элементы, найденные селектором '.asd', будь их 100, 1 или 0, и конечно же она все равно использует цикл для того чтоб это сделать, по-другому быть не может. Скорее всего jQuery функция будет даже дольше выполняться ввиду сложности внутренней логики jQuery.

    По поводу третьего аргумента addEventListener: да, это называется "всплытие событий", но объяснить на словах у меня не получится. Я попробую: если у вас есть 5 вложенных друг в друга элементов и на каждом висит on('click'), то при нажатии на самый верхний выполнятся все обработчики, начиная с того, на какой непосредственно элемент кликнул пользователь: 5, 4, 3, 2, 1.

    Если например на третий элемент обработчик повешен с атрибутом useCapture=true (вот так - addEventListener('click', handler, true)), то при клике на самый верхний элемент, последовательность вызовов будет такая: 3, 5, 4, 2, 1.

    Также порядок выполнения обработчиков, которые используют capture mode, обратный, то есть если обработчики всех элементов используют capture mode, при клике на самый верхний элемент последовательность будет такая: 1, 2, 3, 4, 5, сначала выполнится обработчик родительского элемента.

    Я сделал маленькую демку, можете поиграться с режимами. При клике на строку "useCapture attribute of..." режим обработчика для соответствующего элемента меняется и отображается в этой же строке. По клику на разноцветные блоки появится надпись, отражающая последовательность вызовов, например если средний элемент будет использовать capture mode, а остальные - нет, то последовательность будет выведена такая: two + three + one
    Написано

  • Как масштабировать уже загруженные изображения после загрузки новых (JavaScript)?

    lazalu68
    @lazalu68
    Кхм, что-то я не подумал о том, что за ником MargeSimpson будет не парень. Картинки ведь именно на это рассчитаны были, извините)

    Вот пример HTML-документа с подключением внешнего стилевого файла, который находится в том же каталоге (в той же папке), что и этот файл .html:

    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


    Если у вас стили лежат в папке css, то чтобы подключить один из них, атрибут href должен быть такой: css/styles.css
    Написано

  • Почему шторка JS не работает?

    lazalu68
    @lazalu68
    Этого Виталия все видят кроме меня? XD
    Написано

  • Почему шторка JS не работает?

    lazalu68
    @lazalu68
    А кто такой Виталий? 0_о
    Написано

  • Есть 3 таблицы. Поставщик,Товар.Ордер. Как найти все ордеры поставщика?

    lazalu68
    @lazalu68
    Тогда логичней было бы вместо "У этого поставщика было сделано заказов на такую-то сумму" говорить "У этого поставщика было куплено товаров на такую-то сумму"

    Я мало связан с миром бд, но мне кажется если есть возможность избежать ненужных вычислений (таких как сумма всех ордеров через select с двойным join'ом), лучше попытаться их избежать и, как вы сказали, использовать поле с суммой товаров для каждого поставщика.
    Написано

  • Как изменить значение свойства объекта в зависимости от другого объекта?

    lazalu68
    @lazalu68
    Wuuut?
    Написано

  • Как настроить событие на элемент отслеженный getElementsByClassName???

    lazalu68
    @lazalu68
    Это нулевой индекс, то есть мы берем элемент с индексом 0, самый первый элемент в массиве, который возвращает метод getElementsByClassName('asd').

    А вообще парень этим примером хотел показать, что метод addEventListener существует только у элементов dom, и следовательно вызывать его надо для каждого нужного элемента.

    Например, если переписать ваш пример так, чтобы он работал с массивом элементов, то получится как-то так:

    var elements = document.getElementsByClassName("asd"), 
    length_of_elements = elements.length, 
    setContent = function(){
        this.innerHTML = 'lol';
    }, i;

for (i=0;i<length_of_elements;i++) {
    elements[i].addEventListener('click',setContent,false);
}
    Написано

  • Как настроить событие на элемент отслеженный getElementsByClassName???

    lazalu68
    @lazalu68
    document.getElementsByClassName('asd')[0].addEventListener('click',function(e){console.log(e.target)},false);

    Так?
    Написано

  • Слайдер на JS. Странности с transition. Как быть?

    lazalu68
    @lazalu68
    Ну тогда вдобавок еще нажмите кнопку "Отметить решением" )
    Написано

  • Откуда взялось расстояние между li? Как его убрать?

    lazalu68
    @lazalu68
    Пользуясь этим решением, вы должны быть готовы к тому, что непопулярные браузеры (например, дефолтные для мобильных устройств) будут по-разному обрабатывать такую ошибку, как отсутствие закрывающих тегов. Некоторые удалят открывающий тег, а некоторые могут-таки добавить закрывающий тег, но еще добавят пустую textNode.

    Намного безопасней пользоваться способом №5 из статьи по ссылке. Код получается не такой красивый и лаконичный, зато вы точно знаете, как будет обработан ваш код, ни один браузер не добавит в этом месте никакой отсебятины.
    Написано

  • Как рационально организовать обработку keyboards events?

    lazalu68
    @lazalu68 Автор вопроса
    Спасибо большое)
    Написано

  • Как рационально организовать обработку keyboards events?

    lazalu68
    @lazalu68 Автор вопроса
    В конструктор обернул, потому что не знал, как в одно действие создать объект со свойствами, ссылающимися на свойства этого же объекта (например, я пытался объявить свойства container : $() и items : container.children(), получается ошибка). В итоге получилось вот это

    Ошибки наконец-то исчезли ?)
    Написано

  • Как рационально организовать обработку keyboards events?

    lazalu68
    @lazalu68 Автор вопроса
    Вот, переделал так, чтобы все было в одном объекте, который собран конструктором. По поводу переменных тоже все исправил.

    Зато код теперь выглядит отвратительно( Можно было как-то это сделать без постоянного упоминания this и base?
    Написано

  • Как рационально организовать обработку keyboards events?

    lazalu68
    @lazalu68 Автор вопроса
    Ну, можно и в объекте, так и было пару версий назад, но потом я из каких-то слухов решил, что обращение к массиву будет обрабатываться быстрее, чем обращение к объекту. Я не прав?
    Написано

  • Почему нету offsetBottom и offsetRight?

    lazalu68
    @lazalu68
    Ну во-первых, это не функции. А что значит "не те" все равно не понятно. Ну вы же уже решили свою проблему, так что наверное можете уже не объяснять. Я просто надеялся что вы-таки объясните, но, видимо, зря)
    Написано