открыть всплывающее окно для каждого класса ссылки на страницу не работает входы [я] не определено, как я могу решить?

Question

это мой код. Я пытаюсь открыть все ссылки на странице, используя класс и

.getAttribute ('href') и setimeout, но не работает мой код, что IM делает неправильно

, пожалуйста, помогите мне

function newWindow(url)  {

 var inputs = document.getElementsByClassName('myclass');
 i=1

 MT=8000*i;MT1=8000*i+8000;
 win = window.open(url1, '1366002941508','height=250,width=234,left=0,top=0,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no') ;

 for (var i=0; i<inputs.length; i++) {
      setTimeout(function(){

           win.close(); 
           inputs = document.getElementsByClassName('myclass'); 
           url1=  inputs[i].getAttribute('href'); 
           MT=8000*i;MT1=8000*i+8000;
           win = window.open(url1, '1366002941508','height=250,width=234,left=0,top=0,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no') ;

      }, 7000*i);
 }
};

Answer 1

test1() завершится ошибкой, потому что при выполнении setTimeout() индекс (i) достиг 4 (длина запрашиваемых элементов - что при массивах / списках, начинающихся с 0, означает, что он не предназначен ни для чего).

test2() является более распространенным подходом - вы передаете элемент другой функции, где он затем запоминается и может быть запрошен при выполнении тайм-аута

test3() использует более новую версию ES6. Использование объявления переменной let, похоже, сохраняет его состояние при запуске тайм-аута.

test4() является примером рекурсивной функции, которая будет вызывать функцию callTest() с задержкой между каждым попаданием.

const tests = document.getElementsByClassName('test');

function test1(){
  // will fail
  console.log( 'test 1 called ... ' );
  for( var i=0, x=tests.length; i<x; i++ ){
    setTimeout( function(){
      console.log( i );
      console.log( tests[i].getAttribute('data-test') );
    }, 3000 );
  }
}

function test2(){
  // common pattern
  console.log( 'test 2 called ... ' );
  for( var i=0, x=tests.length; i<x; i++ ){
    parseInfo( tests[i] );
  }
  function parseInfo( element ){
    setTimeout( function(){
      console.log( element.getAttribute('data-test') );
    }, 3000 )
  }
}

function test3(){
  // fun with ES6
  console.log( 'test 3 called ...' );
  for( let test of tests ){
    setTimeout( ()=>{
      console.log( test.getAttribute('data-test') );
    }, 3000 );  
  }
}

function test4(){
  // delay the call of each console by n seconds...
  console.log( 'test 4 called...' );
  delayCall( 0 );
  function callTest( element ){
    console.log( element.getAttribute('data-test') );
  }
  function delayCall( index ){
    setTimeout(()=>{
      callTest( tests[index] );
      if( index < tests.length - 1 ){
        index++;
        delayCall( index );
      }
    }, 3000 );
  }
}

<div class="test" data-test="one"></div>
<div class="test" data-test="two"></div>
<div class="test" data-test="three"></div>
<div class="test" data-test="four"></div>

<button onclick="test1()">TEST 1</button>
<button onclick="test2()">TEST 2</button>
<button onclick="test3()">TEST 3</button>
<button onclick="test4()">TEST 4</button>