VPF::многократный setTimeout - Форум программистов

animad

Дата 3.10.2009, 19:52 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 9
Регистрация: 9.11.2004
Где: Рязань

Репутация: нет
Всего: нет

необходимо сделать все ту же ..... БЕГУЩУЮ СТРОКУ, но реализовать ее своими силами и .... ... хочу, что бы можно было запускать несколько экземпляров на одной странице. пробовал реализовать setTimeout и setInterval .... проблема в том, что обозреватели... (FireFox) ... запускает только один setTimeout и setInterval а второй остонавливает ...

вот код и не придираясь к мелочам подскажите, есть ли возможность реализовать задумку.... без изпользования marquee .... и в том контексте который использован в приложенном коде...

Код


<html>
    <head>
<script>
    
    function init(){

        // запускаем бегущую строку №1
        begun1=new begun();
        begun1.obj="runline01";
        res=begun1.start();
        if(res!==true){ alert(res); }


        // запускаем бегущую строку №2
        begun2=new begun();
        begun2.obj="runline02";
        begun2.speed=20;
        res=begun2.start();
        if(res!==true){ alert(res); }

    }
    
    
    begun = function (){
        this.obj=null; //внутри ЭТОГО объекта будет прокрутка
        this.str=null; //строка, которую будем двигать
        this.x1=0; //начальная координата
        this.x2=0; //конечная координата
        this.speed=10; //время в миллисек, за которое трока будет смещаться на this.step
        this.step=1; //шаг смещения
        this.dx=0; //текущее смещение
        this.tlcss="text"; //имя класса обозначающее текстовую строку внутри области прокрутки
        this.loopId;
        
        this.start = function(){
            //если объект указан в качестве текстовой метки, то делаем из нее объект
            if(typeof(this.obj)=="string"){
                if(typeof(document.getElementById(this.obj))=="object"){
                    this.obj=document.getElementById(this.obj);
                }else{ erm="id = «"+this.obj+"» не является объектом."; }
            }else if(typeof(this.obj)!="object"){ erm="Указанный контейнер, не может быть «прокручен»"; }
            if(typeof(erm)!="undefined"){ return erm; }
            
            //ищем в контейнере поле с классом this.tlcss
            for(i in this.obj.childNodes){
                if(typeof(this.obj.childNodes[i].className) && this.obj.childNodes[i].className==this.tlcss){
                    this.str=this.obj.childNodes[i];
                }
            }
            if(this.str==null){ return "Строка в контейнере не обнаружена"; }
            
            //инициализируем значения
            this.x1=this.obj.scrollWidth-100;
            this.x2=0-this.str.scrollWidth;
            
            //замены в тексте
            //пробел на &nbsp;
            t2=this.str.innerHTML.split(" ");
            this.str.innerHTML=t2.join("&nbsp;");
            //знак "-" на &minus;
            t2=this.str.innerHTML.split("-");
            this.str.innerHTML=t2.join("&minus;");
            
            t1=this;
            this.loopId=setInterval(function(){ t1.run(); },this.speed);
//            this.run();
            return true;
        }
        
        //смещение и отображение
        this.run = function(){
            //сдвигаем на экране
            this.str.style.left=this.x1-this.dx+"px";
            //если надо, то показываем строку
            if(this.dx==0){ this.str.style.visibility="visible"; }
            //пересчитываем смещение
            this.dx+=this.step;
            //когда смещение доходит до конца, возвращаем в начало
            if((this.x1-this.dx)<this.x2){ this.dx=0; }

//            t1=this;
//            this.loopId=setTimeout(function(){ t1.run(); },this.speed);
        }
    }
    
</script>
<style>

.begun{
    position: relative;
    background-color: red;
    overflow: hidden;
    line-height: 25px;
    height: 25px;
}
.begun .text{
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    font-family: arial;
    color: yellow;
    visibility: hidden;
}
    
</style>
    </head>
    <body onLoad="init();">
        <div id="runline01" class="begun">
            <div class="text">Наша компания специализируется на оптово-розничной торговле товарами для животных, включая ветеринарные препараты (лицензия на фармацевтическую деятельность №хххххх). Наш рынок сбыта включает в себя РФ и страны СНГ.
</div>
        </div>
        <br />
        <div id="runline02" class="begun">
            <div class="text">1234567890-=!@#$%^&*()_+</div>
        </div>
    </body>
</html>

... заранее благодарен

Amphiluke

Дата 3.10.2009, 20:48 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Просто не объявляйте переменные t1 и t2 глобальными, и все будет работать.

bars80080

Дата 3.10.2009, 20:52 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

ну, вообще marquee удовлетворяют поставленным задачам

что касается setTimeout и setInterval, то впервые слышу, чтобы можно было запускать их в одном экземпляре. вам достаточно всего лишь подставлять вместо this.loopId каждый раз новую переменную, в которой будет храниться таймер

Amphiluke

Дата 3.10.2009, 21:04 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Цитата(bars80080 @ 3.10.2009, 20:52

)

вам достаточно всего лишь подставлять вместо this.loopId каждый раз новую переменную

Так ведь оно сейчас вроде так и делается. У каждого экземпляра свой loopId. smile

animad

Дата 3.10.2009, 21:27 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 9
Регистрация: 9.11.2004
Где: Рязань

Репутация: нет
Всего: нет

....2 bars80080. ...

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

...попробуйте... запустите первый вариант кода и увидите, что сначала запускается бегун1 (имею ввиду setTimeout внутри него) ... но как только запускается таймаут из бегуна2 первый останавливается....

***
реализовал чуть по другому... но всеравно, не то что надо:

... вот новореализованный скрипт ... минусы:
1. все крутится с одинаковой скоростью
2. пока не придумал как динамично добавлять запускаемые методы внутрь looprun

Код


<html>
    <head>
<script>
    
    looprun = function(){
        begun1.run();
        begun2.run();
    }

    function init(){

        // запускаем бегущую строку №1
        begun1=new begun();
        begun1.obj="runline01";
        res=begun1.init();
        if(res!==true){ alert(res); }


        // запускаем бегущую строку №2
        begun2=new begun();
        begun2.obj="runline02";
        begun2.speed=20;
        res=begun2.init();
        if(res!==true){ alert(res); }
        
        interv1=setInterval(looprun,20);
    }
    
    
    begun = function (){
        this.obj=null; //внутри ЭТОГО объекта будет прокрутка
        this.str=null; //строка, которую будем двигать
        this.x1=0; //начальная координата
        this.x2=0; //конечная координата
        this.speed=10; //время в миллисек, за которое трока будет смещаться на this.step
        this.step=1; //шаг смещения
        this.dx=0; //текущее смещение
        this.tlcss="text"; //имя класса обозначающее текстовую строку внутри области прокрутки
        this.loopId;
        
        this.init = function(){
            //если объект указан в качестве текстовой метки, то делаем из нее объект
            if(typeof(this.obj)=="string"){
                if(typeof(document.getElementById(this.obj))=="object"){
                    this.obj=document.getElementById(this.obj);
                }else{ erm="id = «"+this.obj+"» не является объектом."; }
            }else if(typeof(this.obj)!="object"){ erm="Указанный контейнер, не может быть «прокручен»"; }
            if(typeof(erm)!="undefined"){ return erm; }
            
            //ищем в контейнере поле с классом this.tlcss
            for(i in this.obj.childNodes){
                if(typeof(this.obj.childNodes[i].className) && this.obj.childNodes[i].className==this.tlcss){
                    this.str=this.obj.childNodes[i];
                }
            }
            if(this.str==null){ return "Строка в контейнере не обнаружена"; }
            
            //инициализируем значения
            this.x1=this.obj.scrollWidth+10;
            this.x2=0-this.str.scrollWidth;
            
            //замены в тексте
            //пробел на &nbsp;
            t2=this.str.innerHTML.split(" ");
            this.str.innerHTML=t2.join("&nbsp;");
            //знак "-" на &minus;
            t2=this.str.innerHTML.split("-");
            this.str.innerHTML=t2.join("&minus;");
            
//            t1=this;
//            this.loopId=setInterval(function(){ t1.run(); },this.speed);
//            this.run();

/*            looprun.run1=function(){
                
            }*/
            return true;
        }
        
        //смещение и отображение
        this.run = function(){
            //сдвигаем на экране
            this.str.style.left=this.x1-this.dx+"px";
            //если надо, то показываем строку
            if(this.dx==0){ this.str.style.visibility="visible"; }
            //пересчитываем смещение
            this.dx+=this.step;
            //когда смещение доходит до конца, возвращаем в начало
            if((this.x1-this.dx)<this.x2){ this.dx=0; }

//            t1=this;
//            this.loopId=setTimeout(function(){ t1.run(); },this.speed);
        }
    }
    
</script>
<style>

.begun{
    position: relative;
    background-color: red;
    overflow: hidden;
    line-height: 25px;
    height: 25px;
}
.begun .text{
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    font-family: arial;
    color: yellow;
    visibility: hidden;
}
    
</style>
    </head>
    <body onLoad="init();">
        <div id="runline01" class="begun">
            <div class="text">Наша компания специализируется на оптово-розничной торговле товарами для животных, включая ветеринарные препараты (лицензия на фармацевтическую деятельность №хххххх). Наш рынок сбыта включает в себя РФ и страны СНГ.
</div>
        </div>
        <br />
        <div id="runline02" class="begun">
            <div class="text">1234567890-=!@#$%^&*()_+</div>
        </div>
    </body>
</html>

Amphiluke

Дата 3.10.2009, 21:39 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Ваш первый вариант работает и крутит на различных скоростях, если сделать t1 локальной переменной! O_o
Я же вам прямо указал...

mxt

Дата 3.10.2009, 21:56 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 133
Регистрация: 6.9.2007

Репутация: нет
Всего: 1

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

--------------------

animad

Дата 3.10.2009, 22:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 9
Регистрация: 9.11.2004
Где: Рязань

Репутация: нет
Всего: нет

2 Amphiluke && mxt ...

.... ЁКЛМН ... smile

столько лет пишу и не знал что var это локально....

... можно только под t1 сделать ... t2 используется только для подмены...

... как ВЫ думаете... может как-то улучшить объект?

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »