JS исчезают в OnLoad с цикла for, стили и setInterval не работает? - PullRequest
Новая
       37

JS исчезают в OnLoad с цикла for, стили и setInterval не работает?

2 голосов
/ 03 ноября 2011

Почему при вызове fadeIn () onLoad браузер сразу запускает цикл. Другими словами, существует проблема с setInterval или Opacityto (). 

function Opacityto(elem,v){
    elem.style.opacity = v/100;
    elem.style.MozOpacity =  v/100;
    elem.style.KhtmlOpacity =  v/100;
    elem.style.filter=" alpha(opacity ="+v+")";}

function fadeIn(){
elem=document.getElementById('nav');
for (i=0;i==100;i++){
    setInterval(Opacityto(elem,i),100);}
}

Я думаю, что кто-то скажет мне, что это можно сделать проще всего с помощью jQuery, но мне интересно сделать это с помощью javascript.

Спасибо! HELP!

Ответы [ 2 ]

1 голос
/ 03 ноября 2011

У вас есть несколько проблем с вашей fadeIn() функцией:

A.Условие для цикла for равно i==100, что не соответствует действительности на первой итерации, и поэтому тело цикла for никогда не будет выполнено (i++ никогда не произойдет).Возможно, вы имели в виду i<=100 или i<100 (в зависимости от того, хотите ли вы запустить цикл 101 или 100 раз)?

B.Ваш setInterval код имеет синтаксическую ошибку EDIT: , поскольку вы обновили свой вопрос, чтобы удалить кавычки - setInterval ожидает либо строку, либо ссылку на функцию / выражение.Поэтому вам нужно либо передать ему имя функции без скобок и параметров, либо выражение функции, такое как выражение анонимной функции, которое вы можете увидеть в моем коде ниже. в том, как вы пытаетесь построить строку, которую вы передаете.У вас есть это: 

"Opacityto("+elem,i+")"

но вам нужно это: 

"Opacityto(elem," + i + ")"

Последний создает строку, которая, в зависимости от i, выглядит как "Opacityto(elem,0)", т.е.он создает допустимый фрагмент JavaScript, который вызовет функцию Opacityto().

C.Вы, вероятно, захотите setTimeout() вместо setInterval(), потому что setInterval() будет запускать вашу Opacityto() функцию каждые 100 мс навсегда , в то время как setTimeout() будет запускать Opacityto() ровно один раз после задержки в 100 мс.Учитывая, что вы вызываете его в цикле, я уверен, что вы на самом деле не хотите вызывать setInterval() 100 раз, чтобы ваша функция Opacityto() запускалась 100 раз каждые 100 мс навсегда .

D.Даже исправляя все вышеперечисленное, ваша базовая структура не будет делать то, что вы хотите.Когда вы вызываете setInterval() или setTimeout(), это не приостанавливает выполнение текущего блока кода.Таким образом, весь цикл for будет запущен и сразу создаст все ваши интервалы / тайм-ауты, а затем, когда истечет 100 мс, все они будут запущены более или менее сразу.Если вы намерены постепенно изменять прозрачность при каждом изменении, происходящем каждые 100 мс, вам понадобится следующий код (или некоторое его изменение): 

function fadeIn(i){
    // if called with no i parameter value initialise i
    if (typeof i === "undefined") {
       i = -1;
    }

    if (++i <= 100) {
       Opacityto(document.getElementById('nav'), i);
       setTimeout(function() { fadeIn(i); }, 100);
    }
}

// kick it off:
fadeIn();

То, что сделано выше, определяет fadeIn() и затем вызывает егоне передавая никаких параметров.Функция проверяет, является ли i неопределенным, и если да, устанавливает его на -1 (что происходит, если вы вызываете его без передачи параметра).Затем он увеличивает i и проверяет, является ли результат меньше или равным 100, и если это так, вызывает Opacityto(), передавая ссылку на элемент, и i.Затем он использует setTimeout() для вызова самого через 100 мс, пропуская текущий i через.Поскольку setTimeout() находится внутри теста if, как только i станет достаточно большим, функция прекратит устанавливать таймауты, и весь процесс завершится.

Есть несколько других способов реализовать это, но это только первыйэто случилось, когда я начал печатать ...

0 голосов
/ 03 ноября 2011

Я предполагаю, что внутри setInterval есть неприятная запятая, запутывающая список аргументов: 

"Opacityto("+elem,i+")"
                ^^^
                here

Вы можете попробовать заключить в кавычки 

+ "," +

но Эвал - это зло, так что не делай этого. Хороший способ - передать реальную функцию обратного вызова: 

function make_opacity_setter(elem, i){
    return function(){
        OpacityTo(elem, i);
    };
}

...

setTimeout( make_opacity_setter(elem, i), 1000);

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

Кстати, когда вы делаете 

setInterval(func(), 1000)

Вы вызываете func один раз, а затем передаете его возвращаемое значение в setInterval. поскольку setInterval получает нежелательное значение вместо обратного вызова, оно не будет работать так, как вы хотите.

...