javascript, jquery setInetval append

Question

Есть такой код:

<div id='chatbox-list'></div>
<script>
function Test() {
        
            $.ajax({
                type: 'post',
                url: '/blabla'
            }).done(function (data) {
                if (data.length > 0) {
                     $('#chatbox-list').append(data);
                }
            });
                        
        }
        
setInterval(Test, 2000);
</script>

data это:

<div id='test'> </div>
Какой-то HTML код

<script>
function Name(){
   $.ajax()
.....
   $('#test').append('blabla');
.....
}

setInterval(Name,1000);
</script>

Внимание вопрос знатокам:)

После добавления HTML и Javascript в , как сделать так, чтобы выполнялся setInterval(Name,1000) и соответственно function Name() ? Может есть какое-то другое решение, которое позволит выполнять через определенный промежуток времени динамически добавляемую функцию?

Answer 1

Не совсем понял, но потести это:

<script>
(()=>{
    const Name=()=>{
        // $.ajax();
        $('#test').append('blabla');
    };
    setInterval(Name, 1000);
})();
</script>

Answer 2

Вставленный в виде строки скрипт не будет работать. Есть два варианта его обработать:

eval()
createElement("script")

let data = 'name(); function name() { console.log("Name!!!"); }';

eval(data);

/***/

let script = document.createElement('script');
script.innerHTML = data;
document.head.appendChild(script);

Но так добавлять скрипты, тем более раз в 2 секунды - плохая идея, как минимум потому что может возникнуть конфликт имен переменных.

И еще, что будет, если ответы начнут задерживаться, а запросы так и будут отправляться раз в 2 секунды? Поэтому можно отправлять следующий запрос только после получения предыдущего, зациклив их через setTimeout.

А вместо вставки целого скрипта, можно завернуть data в JSON, который будет хранить все необходимые данные для обработки, около того:

/*  data = {
 *    "html": "<div>bubu...</div>",
 *    "scriptData": {
 *      "text": "example.com",
 *      "timeout": 1000,
        "appendTo": "#test"
 *    }
 *  }
 */

let STOP_AJAX = false;

ajaxLoop();

function ajaxLoop() {
  $.ajax({
    // ляляля
  }).done(function (data) {
    handleAjaxData(data);

    if ( STOP_AJAX ) return;
    // Чтобы можно было остановить запросы в случае чего.

    setTimeout(ajaxLoop, 2000); // Функция вызывает саму себя
  });
}

function handleAjaxData(data) {
  if( !data.length ) return;

  data = JSON.parse(data);

  if( data.html ) $('#chatbox-list').append(data.html);

  if( data.scriptData ) {
    // вместо вашей функции Name
    let elem = data.scriptData.appendTo;
    let text = data.scriptData.text;
    let tick = data.scriptData.timeOut;

    setTimeout(function(){
      $(elem).append(text);

      // Или например, еще один запрос, если по другому никак.
    }, tick);
  }
}

БЛОГ НА HUSL

javascript, jquery setInetval append

Ответы (2 шт):