Ребята, помогите мне, я полный ноль в js )) Я хочу изменить сумму в корзине, и накостылил скрипт но он не совсем работает я не могу понять почему, на первых 3 товарах сумма меняется а на 4 нет.

привет, подскажите как сделать эдакую задержку на ввод, типа подождать пока польз введет строку а потом выполнить fetchSearchResults(value); ?

setTimOut?

Сам дал ответ на свой вопрос, но мне кажется оно будет криво работать

подсказали дебонс надо делать

Мое мнение - эта задержка там не нужна. Я бы повешал на keyUp, просто пока клиент сделает запрос на сервак то и так пройдет какое-то время секунда - две

+

ню, там не так много продуктов, быстро грузит, поэтому хотя бы две сек минимум пусть ждёт))

Можно спинер какой-то засунуть

пока данные придут?

Да

хм, интересно

мож так даж сделаю

Это временем не реакт используете?

да реакт

Ну вот,  делаете стейт loader, setLoader в нем false, потом в fetch'e в начале задаете setLoader(true) (если промисом делать то в then пишете уже setLoder(false), а на сам лоадеркоторый в html дергаете его  loader && 'display: block'

Ну а по дефолту в стилях лоадеру display: none

useDebounce.js

import { useState, useEffect } from 'react'

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value)
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)
    return () => {
      clearTimeout(handler)
    }
  }, [value])
  return debouncedValue
}

export default useDebounce

Использование:

...
const [inputValue, setInputValue] = useState('')
const debounced = useDebounce(inputValue, 2000) // 2 секунды

useEffect(() => {
   // логика
}, [debounced])
...

Всем привет! Поскажите немогу понять что не так? https://codepen.io/gamerthepro/project/editor/DkGwgQ#

module.exports = function (participants, sports) {  
 /  
  * Подобно оператору new создает экземпляр объекта,  
  * используя функцию-конструктор и параметры для нее  
  */  
 function constructFrom (fnConstructor, params) {  
    const res = {};  

    fnConstructor.bind(res).call(params);  

    Object.setPrototypeOf(res, fnConstructor);  

    return res;  
 }  

 /  
  * Создает пары вида [’вид спорта’, ’имя участника’],  
  * где первому виду спорта соответствует последний участник  
  */  
 function assignParicipants () {  
    const participants = this.participants;  
    const sports = this.sports;  
    const orderIndexes = [];  
    let i = sports.length;  

    while (i--) {  
       orderIndexes.push(function() {  
         return i;  
       });  
    }  

    return orderIndexes.map(  
     (getSportIndex, i) => [sports[i], participants[getSportIndex()]]  
     );  
 }  

 function Contest (participants, sports) {  
    this.participants = participants;  
    this.sports = sports;  
 }  

 Contest.prototype.assignParicipants = assignParicipants;  


 const contest = constructFrom(Contest, participants, sports);  

 return contest.assignParicipants();  
}