https://jsfiddle.net/0bt3hy29/6/
function chandgeBackgroundImageOnMouse() { house.addEventListener("mouseover", ()=>{ bgImage.style.backgroundImage = home is_paused = true }) house.addEventListener("mouseout", ()=>{ is_paused = false }) }Cuando pasa el mouse sobre el elemento "casa" y luego lo aleja, todo funciona como debería. Pero si pasa el mouse sobre y hacia afuera muy rápidamente, el control deslizante automático se romperá.
Entonces, veo 2 opciones.
Para hacer que reaccione solo después de un intervalo de 3 segundos (se pasa el mouse y luego se aleja; solo después de 3 segundos se puede pasar el mouse una vez más)
Para hacer que reaccione solo cuando se cambió la imagen (es pasar el mouse, luego alejar el mouse, y solo después de que se cambió la imagen, se puede pasar el mouse una vez más)
Su código es recursivo con intervalo, por lo que crea recursivamente nuevas instancias de muchas cosas. En su lugar, intente esto.
const car = "url('https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80')" const home = "url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1175&q=80')" const candles = "url('https://images.unsplash.com/photo-1593542468714-ac3ba4b38d43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80')" const data = [ car, home, candles, ] const house = document.querySelector('#house') const avto = document.querySelector('#avto') const bgImage = document.querySelector('.img-of-dog') let current = 0; function intervalMethod(){ bgImage.style.backgroundImage = data[current] current = ++current % data.length } let changeTimeset = setInterval(()=>{ intervalMethod(); }, 2000) house.addEventListener("mouseover", ()=>{ clearInterval(changeTimeset); bgImage.style.backgroundImage = home }) house.addEventListener("mouseout", ()=>{ changeTimeset = setInterval(()=>{ intervalMethod(); }, 2000) })