Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Остановить выполнение функции внутри другой функции (https://javascript.ru/forum/misc/41514-ostanovit-vypolnenie-funkcii-vnutri-drugojj-funkcii.html)

ami_moor 17.09.2013 12:24

Остановить выполнение функции внутри другой функции
 
Здравствуйте.
Такая проблема

Реализовано следующее:
при открытии страницы срабатывает функция и выдаётся поочерёдно элементы массива (текста пословиц) в стиле печатающей машинки.
При нажатии на div(это кнопка) выскакивает поапапчик, но проблема в том, что функция cycle() продолжает работать, хочу как то реализовать, что бы при открытии поапапа текст (элементы массива) останавливался т.е останавливалась функция cycle(), как только поапап закрываешь, текст продолжал выводиться
Можно сделать вместо поапчика alert, тогда функция cycle() останавливается, но в данном случае хочу разукрашенное красивое выскакивающее окошко.
<script language="JavaScript">
    var timer, secs;    
    var Q, d;
    d=document; 
    Q={};
    Q.mass=["As an employer, I wouldn't employ someone with tattoos as I would wonder what customers would think about them. ", 
            "The difference between most mothers and me is that I didn't sit around drinking coffee at baby group for 12 months after the birth of my baby.", 
            "Mammary militia breast feeding en masse in Costa. Puts one off their latte.", 
            "I lied to get someone else's husband because I wanted him. I give myself 8 out of 10 for ruthlessness for that one.",       
            ];
        
    Q.ind = 0;
    Q.txt=Q.mass[Q.ind];
    Q.len=Q.txt.length;
    Q.num=0;
    Q.tim=150;
    secs = 1;
 
    onload=function(){
        init();
    };
 
    function init(){
        Q.elem=d.getElementById("txtTT");
       start();
    };
 
    function start(){
        Q.elem.innerHTML=Q.mass[Q.ind];         
        start_timer();      
        Q.num = 0;
        Q.txt=Q.mass[Q.ind];
        Q.len=Q.txt.length;
        cycle();                    
        Q.ind++;                
        if (Q.ind >= Q.mass.length) Q.ind = 0;
                
    };
    
    function stop(){
        $.alert('You lasted before you slapped some sense into<br>Katie Hopkins');    
        secs = 1;
        
  
 
    };
    function cycle(){       
        if(Q.num!=Q.len){
            Q.num++;
            Q.elem.innerHTML=Q.txt.slice(0, Q.num);
            setTimeout(cycle, Q.tim);
        }
        else
        {
            Q.num = 0;
            Q.ind++;
            if (Q.ind >= Q.mass.length) Q.ind = 0;
 
            Q.txt=Q.mass[Q.ind];
            Q.len=Q.txt.length;
    
            cycle();
        };
     
    };
        
 </script>


Вот JS ещё для украшения окна поапапчика
(function($){$.alert=function(text,pt,type){
        var p=$.extend({titleText:'Well done for lasting so long...',divFirst:'jdmDialog',classOverlay:'jdmOverlay',overlay:50,speedAnimate:300,minWidth:600,minHeight:380,textAlign:'left',textButCancel:'Отмена',textButYes:'Ок',funcCancel:function(){$('.'+jqAlert.divFirst).alertHide();},funcYes:function(){$('.'+jqAlert.divFirst).alertHide();}},pt);
        if(type=='confirm'){$('.'+p.divFirst+' .jdmYesButton').html(p.textButYes).show();}
        else{$('.'+p.divFirst+' .jdmYesButton').hide();}
        if(p.ajax){
            var aj=$.extend({url:'',type:'POST',data:''},p.ajax)
            $.ajax({async:false,url:aj.url,data:aj.data,type:aj.type,success:function(d){text+=d},error:function(){text="Ошибка запроса!!!<br />Попробуйте позже."}})
        }
        var d=$(document);
        $('.'+p.classOverlay).css({opacity:p.overlay/100,width:d.width(),height:d.height(),top:0,left:0,'z-index':99}).fadeIn(p.speedAnimate);
        $('.'+p.divFirst).css({width:'auto',height:'auto','z-index':100}).find('.jdmMessage').css({'text-align':p.textAlign}).html(text);
        $('.'+p.divFirst+' .jdmTextTitle').html(p.titleText);
        $('.'+p.divFirst+' .jdmCancelButton').html(p.textButCancel);
        var width=$('.'+p.divFirst).width();
        var height=$('.'+p.divFirst).height();
        if(width<p.minWidth){width=p.minWidth;}
        $('.'+p.divFirst).css({width:width});
        if(height<p.minHeight){height=p.minHeight;}
        $('.'+p.divFirst).css({height:height})  
        var w=$(window);
        $('.'+p.divFirst).css({top:150+w.scrollTop(),left:w.width()/2-width/2,'z-index':1000}).fadeIn(p.speedAnimate);
        window.jqAlert={speedAnimate:p.speedAnimate,classOverlay:p.classOverlay,divFirst:p.divFirst,funcCancel:p.funcCancel,funcYes:p.funcYes};
    }
    $.fn.alertHide=function(){
        $('.'+jqAlert.classOverlay).fadeOut(jqAlert.speedAnimate);
        this.fadeOut(jqAlert.speedAnimate);
        start();
     
    }
    $(document).ready(
        function(){
            $('.jdmCancelButton, .jdmTitleClose').click(function(){jqAlert.funcCancel();})
            $('.jdmYesButton').click(function(){jqAlert.funcYes();})
        })
    $.confirm=function(text,p){
        $.alert(text,p,'confirm')
    }
})(jQuery)// JavaScript Document


<div id="txtTT"></div>
    <div class="botton" onclick="stop()">Показать окошко</div>


Я так понимаю нужно при нажатии на кнопку т.е вызове функции stop() остановить функцию cycle() ... мучалась-мучалась, так и не получилось((( прошу вашей помощи

Буду благодарна любым зацепкам

danik.js 17.09.2013 13:17

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

ami_moor 17.09.2013 13:22

#дубль

ami_moor 17.09.2013 13:22

Какими же другими способами Вы предложите мне решить данную задачу?

danik.js 17.09.2013 14:02

Удалять таймер, по которому запускается функция cycle, и когда нужно запускать его вновь. setTimeout/clearTimeout


Часовой пояс GMT +3, время: 11:56.