Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post

    Wait for variable to change before continuing.

    Hey all,

    So this has been stumping me for the past couple days and I am hoping someone can give me a clue on how this can be done.

    I have this function that is called when a next button is clicked:
    Code:
    function navigateToPage(pageurl){
    				audfile = null;
    				
    				pauseaudio();
    				jQuery("#coursecontent").attr("src", pageurl);
    				
    				jQuery("#coursecontent").load(function() {
    					audfile = window.coursecontent.__backgroundaudio;
    				});
    				
    				//WAIT HERE UNTIL audfile IS NOT NULL
    				
    				playnextsound();
    				
    			}
    My problem is that I have content loading in an iframe (coursecontent). I can't call playnextsound() until that content is loaded. I know that I could just put the playnextsound() in the load function but that won't work as I am trying to find a workaround for audio autoplay on the ipad. That is why I am setting the audfile in the load function. I need to wait until audfile is no longer null before calling playnextsound(). The problem is that I can't call playnextsound() from inside any timer or anything because it will cause autoplay audio to not work. I thought maybe a while loop would do the trick but that seems to just create an infinite loop. I would be forever grateful if someone could give me any pointers.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Ahem I don't get it, actually.

    You are assigning audfile inside the callback of the .load() method. Exactly at that point audfile is not null any more. So you don't have to wait for anything, because at that point it already happened

    Code:
    function navigateToPage(pageurl){
    	audfile = null;
    	
    	pauseaudio();
    	jQuery("#coursecontent").attr("src", pageurl);
    				
    	jQuery("#coursecontent").load(function() {
    		audfile = window.coursecontent.__backgroundaudio;
    		//WAIT? For what? audfile is not null here
    		playnextsound();
    	});
    }

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks for the reply devnull69.

    Unfortunatley that is part of my issue. audfile will be null until the content in the iframe is loaded. I need to wait until the content is loaded and audfile is set before I can call playnextaudio(). I would like to call playnextaudio() from within the .load but then it doesn't allow me to do .play on the audio element on the iPad (damn apple). If i just call playnextsound() after the .load it does not have the correct audio file yet. I hope this is making sense. We are trying to come up with a way to get autoplay to work on the ipad and this is so close but playnextsound() is just called a little too early before the .load is complete.

    Any other ideas?

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post
    So my goal is to somehow stall before the playnextaudio() call until audfile is set but audfile will not be set correctly until .load is complete. I am not even sure this is possible but I would think there must be a solution to this.

  • #5
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    What your describing sounds, to me, like the observer pattern.
    It's essentially the way event listeners work: watch for something to happen, and when it does- do something.
    I've been working on the following constructor
    Code:
    <script>
    window['Loop'] = function(myFunct) {
        
        var loop = this, rate = 1E3, code = myFunct, paused = false, run = function() {
            clearTimeout(loop.Cycle);
            if(code) {
                if(!paused) {
                    code()
                }
                loop.Cycle = setTimeout(run, rate)
            }
        };
        
        loop["resume"] = function() {
            paused = false
        }, loop["pause"] = function() {
            paused = true
        }, loop["die"] = function() {
            code = false
        }, loop["speed"] = function(r) {
            r && typeof r == "number" && r > 0 && (rate = r);
            return rate
        }, loop["init"] = function() {
            if(!loop.Cycle && code) {
                run()
            }
        }
    };
    window['Observer'] = function(o,e) {
        var observer = this, observing = o, codeToEvaluate = e, CheckIfReady = function() {
            if(observing() !== true) {
                return;
            }
            observer.die();
            codeToEvaluate();
        };
        Loop.call(observer, CheckIfReady);
        observer.speed(1);
        
    };
    
    testvar=3
    
    guy = new Observer(function(){return testvar==5} , function(){alert('got it!')})
    
    guy.init()
    
    </script>
    <button onclick="testvar=5">get it</button>
    It's still not ready for my needs (it can't go dormant while a value is true and reset itself when value is false again), but works great for one offs like yours

    Code:
    //Loop and Observer constructors
    var Loop=function(d){function b(){clearTimeout(a.a);c&&(e||c(),a.a=setTimeout(b,f))}var a=this,f=1E3,c=d,e=!1;a.resume=function(){e=!1};a.pause=function(){e=!0};a.die=function(){c=!1};a.speed=function(a){a&&"number"==typeof a&&0<a&&(f=a);return f};a.init=function(){!a.a&&c&&b()}},Observer=function(d,b){var a=this;Loop.call(a,function(){!0===d()&&(a.die(),b())});a.speed(1)};
    
    function navigateToPage(pageurl){
    				audfile = null;
    				
    				pauseaudio();
    				jQuery("#coursecontent").attr("src", pageurl);
    				
    				jQuery("#coursecontent").load(function() {
    					audfile = window.coursecontent.__backgroundaudio;
    				});
    				
    				//WAIT HERE UNTIL audfile IS NOT NULL
    
    				var waitUntilReady =  new Observer(	//(both parameters have to be a function)
    					function(){
    						return audiofile!==null;	// What are we testing for (return true when the stars align...)
    					} ,
    					playnextsound	// What we will do when ready 
    				);
    				waitUntilReady.init()	// Get things started
    				
    			}
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    I agree with devnull69 that putting playnextsound() inside the load handler should work. Can you post the content of the playnextsound()?

    Try setting the load handler first before setting the src and use chaining to optimize your code. Setting src first than load handler may prevent the load handler to be executed as it may be too late to be triggerred if the src has been loaded completely prior to setting the load handler.

    Code:
    jQuery("#coursecontent")
        .load(function() {
            audfile = window.coursecontent.__backgroundaudio;
            playnextsound();
        })
        .attr("src", pageurl);


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •