Задать вопрос
8XL

8XL

Я высокий, но ниже, чем вы подумали.
Ответы пользователя по тегу JavaScript

  • Что делать с сообщениями в чате, которых уже не видно?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Здравствуйте.
    Самый простой способ реализации сообщений - через массив. Если ваш подход именно таков, то вы можете просто ограничить длинную массива, например при получении нового сообщения приложением, оно проверяет длину истории сообщений и удаляет лишние, в зависимости от метода добавления(array.splice()).

    Если же реализация выглядит иначе, то приложите код для ознакомления.
    Ответ написан
    3 комментария
    3 комментария

  • Как реализован данный функционал?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    https://developer.mozilla.org/ru/docs/Web/API/Canv...
    https://github.com/mdn/dom-examples/blob/master/ca...

    Тонкий намек на возможное решение.
    Самым сложным будет палитру прописывать + разлиновать исходник.
    На примере: верхняя сторона - красный цвет, левая - зеленый, правая - синий.
    У нас есть область замены - 3 штуки. Каждая из областей находит определенный цвет и заменяет его на цвет из палитры(тут главное в canvas API вникнуть, чтобы вернуть как было или два канваса, где верхний меняется, а нижний остается базовым).
    Ну, это если в общем расписывать, но, думаю, принцип понятен.
    Ответ написан
    5 комментариев
    5 комментариев

  • Как сохранить значения после перезагрузки?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали. 
    localStorage.setItem('ключ', JSON.stringify(что нужно сохранить))
  ...
  //onload
 const savedData = JSON.parse(localStorage.getItem('тот самый ключ'))

    https://developer.mozilla.org/ru/docs/Web/API/Wind...

    Либо, как уже предложили, сохранять в БД post/put запросом, и отправлять get при загрузке страницы.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать зацикленную анимацию движения?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Добрый день.
    Могу ошибаться, но в вашем случае анимация работает только вверх, значит нужно ввести какие-то ограничения.
    Полагаю, стоит попробовать добавить условие, например 
    if(vertical >= document.height){
  vertical++
} else {
  vertical--
}


    Таким образом элемент будет подниматься до высоты документа(играет роль позиционирование элемента. в вашем случае его позиционирование рассчитывается от bottom), и достигнув её, опускаться обратно.

    Второе, что не является ошибкой, но считается более верной практикой:
    меняйте не bottom в стиле, а transform: translateY('значение').

    Третье, как уже вам посоветовали, действительно гораздо проще зациклить анимацию в CSS.
    #ghost{
 position: absolute;
 bottom: 50px;
 animation: movement 10s linear infinite;

@keyframes movement{
  50% {
    transform: translateY(100px)
  }
  100%{
    transform: translateY(0)
  }
    Ответ написан
    Комментировать
    Комментировать

  • Как в React отменить перезагрузку страницы при клике на кнопку и при том же клике сразу вызвать другую функцию?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали. 
    const handleClick = (e) => {
 e.preventDefault();
SpeechRecognition.startListening({ continuous: true, language: 'ru' })
}

onClick = { handleClick }
    Ответ написан
    Комментировать
    Комментировать

  • Рендеринг массива с ограничением по длине и подстановкой "+хх more"?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Мне вот просто интересна критика своей версии, на истинность не претендую:
    через реф1 мы получаем ширину контейнера, затем вешаем рефы на каждый элемент массива, получаем их(елементов массива) ширину и индекс в массиве, складываем ширину элементов до ширины контейнера, остальные пeшим в новый массив, который развернется(если я правильно понял функционал) по клику +xxmore. Таким образом лишнего мы не рендерим, а в случае нужды - можем получить.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно использовать useCallback в React?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали. 
    function Child ({data, sayHi}) {

  const handleClick = useCallback(el => {
    sayHi(el)
  }, [])

  return (
    <div className="App">
      {data.map(el=>
        <div
          onClick={()=>handleClick(el)}
        >
          {el}
        </div>
      )}
    </div>
  )
}

export default function App() {
  const data = [1,2,3,4]
  
  const sayHi = (el) => {
    console.log('Hi '+ el)
  } 

  return (
    <Child data={data} sayHi={sayHi} />
  )
}


    Вы обманываете, тут нет ошибки в хуке.

    По-факту же ошибку вызывает doSomething( ), в которой, скорее всего, вызывается setState( ), который вызывает рендер и так далее до бесконечности, что не позволяет отрендерить.
    Ответ написан
    2 комментария
    2 комментария

  • Что здесь является this?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Я не очень понял твоё понимание("великий и могучий..."), но суть такова:
    (попытаюсь на пальцах, ибо сам в теории не силен)
    в пропсы компонента Square опускается не только вэлью(крестик или нолик), но и setState, обернутый в handleClick. То есть, таким образом, кликая по баттону в Square, фактически ты меняешь состояние компонента Board (

    handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
    squares: squares,
    xIsNext: !this.state.xIsNext,
    });     (вот тут).

    А this. говорит реакту, что нужно передать handleClick из этого компонента.
    Ответ написан
    Комментировать
    Комментировать