Как вызвать код функции?

Question

[AsdfAsdfSK]

Доброго времени суток. Появилась проблемка:
У меня есть функция,которая выполняет запрос на сервер и загружает скрипт на страницу:

let w=window;
                w.onload=function(){
                    const xhr = new XMLHttpRequest()

                    xhr.open('GET', 'test.js', true)
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState != 4) return;

                        if (xhr.status != 200) {
                            alert(xhr.status + xhr.statusText)
                        } else {

                            let add=window.document.getElementsByTagName('script')[0]

                            var script=window.document.createElement('script');

                            script.src='test.js'

                            add.parentNode.insertBefore( script, add )

                            alert(xhr.responseText)//Нужно,что бы выводило сам код файла,а не его текст
                        }


                    }

                    xhr.send(null)
                }

Соответственно в строке alert(xhr.responseText) я вызываю текст данного файла,в то время как мне нужно вызывать его код.Как это можно реализовать? Пробовал через eval(),но не вышло.
Вообщем и целом изначально я пытался реализовать следующую задачу:
При скролле страницы до определенного блока в текстовых элементах этого блока должна рисоваться анимация. Саму функцию анимации я реализовал.Так же реализовал то,что она срабатывает,дойдя до n места,однако запутался с тем моментом,что функция должна вызываться сама,в нужный момент,а не только тогда,когда я ресетаю страницу на n месте. Посему взялся за изучение Аякса.И запутался.

Comments

[Дмитрий]

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

var f = new Function(xhr.responseText)
f();

и уже потом её вызвать
Но честно, не уверен в варианте)

[Сергей Соколов]

Приведите, пожалуйста, код из загружаемого файла
Почему нельзя включить этот код сразу в тело страницы, обернув в функцию, и вызывать, когда потребуется?
Как именно «не срабатывает eval()» – что появляется в консоли?

[AsdfAsdfSK]

Дмитрий, Как раз таки в файле функция,которая рисует анимацию:D

[AsdfAsdfSK]

Сергей Соколов,

let middle=document.querySelector('#MiddleBlock')
      let icon=document.querySelector('.icon')
      let descrIcon=document.querySelector('.descrIcon')
      let titleIcon=document.querySelectorAll('.titleIcon')
      let scrollSize=window.pageYOffset
      let titleIconOffset=titleIcon.offsetTop
      let middleOffset=middle.offsetTop
      
      
    const animationObj=[
      { 
            opacity:0.3
        },
        {
          opacity:0.5
        },
        { 
            opacity:0.6
        },
        {
          opacity:0.7
        },
        {
          opacity:0.9
        },
        {
            opacity:1
        }


      ];


        for(let i=0;i<titleIcon.length;i++){
          var all=titleIcon[i]
          
            
              function setAnimate(animateElem,currentOffset,elemOffset){
          if(currentOffset>=elemOffset){
            animateElem.animate(animationObj,{
              duration: 2500,
                   fill: 'forwards'
            })
          }

      }
      setAnimate(all,scrollSize,middleOffset)
        }

Код функции.

[AsdfAsdfSK]

Сергей Соколов, Может я запутался,а может некорректно задал вопрос.Смотрите:
У меня есть функция,которая рисует анимацию. Рисовать она её должна по определенному условию

if(topOffset>=cuurentDivOffset){
 Если да,то она выполняется,иначе,соответственно,нет
}

Однако такой код пусть и работает,но работает ТОЛЬКО если я перезагружу страницу и место ресета страницы будет соответствовать условию моего if.В то время как я планирую,что бы,когда пользователь,скролля страницу вниз дошёл до моего блока и условие выполнилось-выполнилась и сама функция,без перезагрузки страницы.За решением я обратился к AJAX и у меня ничего не вышло.

[Сергей Соколов]

Оберните код функции и вставьте его сразу в документ, не надо AJAX:

const mySuperAnimationFunction = () => {

// тут весь "код функции"

}

И когда нужно выполнить анимацию - доскроллили до места - вызывайте её: mySuperAnimationFunction();

[AsdfAsdfSK]

Сергей Соколов,

const ShowAnimate=(animateElem)=>{
            this.animateElem=animateElem


            animateElem.animate(animationObj,{
                duration:5000,
                fill:'forwards'
            })
        }
 
        
        w.onscroll=function(){
            var scroller=w.pageYOffset
            if(scroller>=middleOffset){
                ShowAnimate(descrIcon)
            }
        }

Решил задачу вот таким вот образом.Спасибо огромное,долго с этим мучался и не знал,с чего начинать.

Answer 1

[Сергей Соколов]

Оберните код функции и вставьте его сразу в документ, не надо AJAX:

const mySuperAnimationFunction = () => {

// тут весь "код функции"

}

И когда нужно выполнить анимацию - доскроллили до места - вызывайте её: mySuperAnimationFunction();