Александр

https://codepen.io/anon/pen/QeKBNj?editors=1010

var $target = document.querySelector('#target');

var timeoutId;

$target.addEventListener('mouseenter', function () {
  clearTimeout(timeoutId); // По идее, такого быть не должно, но я параноик
  
  timeoutId = setTimeout(function () {alert(1);}, 2000);
});

$target.addEventListener('mouseleave', function () {
  clearTimeout(timeoutId);
})

https://jsfiddle.net/alexey_m_ukolov/zokeg75d/2/

держи

$('#topPanel').val(valTop.join(''));

Еще лучше, убрать \n у

valTop.push(row['value']);

и при выводе его добавлять

$('#topPanel').val(valTop.join('\r\n'));

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

[1,2,3].toString() // "1,2,3"

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

[1,2,3].join(''); // 123

если в join не передать аргумент, то по умолчанию опять разделителем будет запятая

[1,2,3].join(); // 1,2,3

можно так https://jsfiddle.net/wq8j6sxr/3/

https://jsfiddle.net/ma21h848/

console.log( new Date( 1497094200000 ) );

("" + (new Date(1497094200000)).toISOString()).replace(/^([^T]+)T(.+)$/,'$1')

"2017-06-10"

("" + (new Date(1497094200000)).toISOString())
        .replace(/^([^T]+)T(.+)$/,'$1')
        .replace(/^(\d+)-(\d+)-(\d+)$/,'$3.$2.$1')

"10.06.2017"

minimal.be/lab/jQuery.eraser

Значения по умолчанию для аргументов функции - это часть стандарта es-2015
Если нужна поддержка пользователей на ie <= 11, safari <= 9 и прочих отстающих, то код нужно компилировать babel'ем перед выкладыванием на сайт

Через инспектор видно как реализовано (clip-path): div с классами .slide.fill при клике получает класс .slide.fill.active и для красоты transition

.slide.fill
webkit-clip-path: circle(0px at center);
-moz-clip-path: circle(0px at center);
-ms-clip-path: circle(0px at center);
clip-path: circle(0px at center);

.slide.fill.active
-webkit-clip-path: circle(150% at center);
-moz-clip-path: circle(150% at center);
-ms-clip-path: circle(150% at center);
clip-path: circle(150% at center);

-webkit-transition: 1s cubic-bezier(0.28, 0, 0.18, 1);
-moz-transition: 1s cubic-bezier(0.28, 0, 0.18, 1);
transition: 1s cubic-bezier(0.28, 0, 0.18, 1);

В jQuery есть специальный метод .offset() для получения координат элемента относительно документа. Чтобы получить расстояние от верха страницы до шапки используйте вот такой код: $('<селектор шапки>').offset().top

На чистом Javascript всё немного сложнее. Сначала нужно получить координаты объекта на странице с помощью getBoundingClientRect() а после этого прибавить к этим координатам значение скроллинга. Вот функция, которая работает аналогично jQuery.offset() (взято здесь):

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}

Вы делаете абсолютно не правильно. Вам нужно подучить язык.
Пример: jsfiddle.net/IonDen/4j8Lyz71

<select id="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
Новая цена: <span id="price">1</span>

var $select = $('#test'); // сохраняем в переменную ссылку на селект
var $price = $('#price'); // сохраняем в переменную ссылку на блок с ценой

// на селект навешиваем слушатель, который следит за изменениями
$select.on('change', function () {
    var value = $(this).prop('value'); // если что-то изменилось, получаем value селекта
    $price.html(value); // ставим этот value в поле с ценой
});