javascript - How do I remove setInterval on a function? -

-

i've function called fadein , want return until condition met.

i tried put alert in else line along clearinterval(myvar), keeps alerting.

css:

* {     background-color: black;     padding: 0;     margin: 0;     height: 100%; } #title {     background-color: white;     height: 50px; } audio {     display: none; } #audio-icon {     width: 50px;     background-color: white; } #focus {     background-color: black;     margin: auto;     width: 100%;     height: 700px;     border: 5px, solid, grey;     border-style: inset;     border-radius: 10px; } #text-box {     background-color: black;     width: 100%;     height: 200px;     margin-top: 500px;     float: left;     border: 5px, solid, grey;     border-style: inset;     border-radius: 10px; } #command-line {     background-color: black;     width: 100%;     height: 50px;     margin-top: 150px;     float: left;     border: 5px, solid, grey;     border-style: inset;     border-radius: 10px; } #element {     opacity: 0.1; }

html:

<audio id="background-audio" controls autoplay="autoplay" loop>     <source src="darkness.mp3" type="audio/mpeg"> </audio> <div id="title">     <img id="audio-icon" src="unmute.png" onclick="mute()">     <img id="element" src="123.png"> </div> <div id="focus">     <div id="text-box">         <div id="command-line"></div>     </div> </div>

javascript:

function fadein() {     var myvar = setinterval(fadein, 500);     var element = document.getelementbyid('element');       if (element.style.opacity < 1) {         element.style.opacity -= '-0.1';     } else {         clearinterval(myvar);      } }  function mute() {     var audio = document.getelementbyid('background-audio');     var img = document.getelementbyid('audio-icon');      if (audio.muted) {         audio.muted = false;         img.src = 'unmute.png';     } else {         audio.muted = true;         img.src = 'mute.png';     } }   document.onload = fadein();

update:

i have put variables outside of function , of sudden code seems work correctly. not sure how possible since have tried already. code wouldn't run @ , alert keep alerting. anyway help. first question apart few typos , way listed code don't know why downvoted feedback welcome! here current working code:

<script>             var myvar = setinterval(fadein, 500);             var element = document.getelementbyid('element');              function fadein() {                 console.log(element.style.opacity)                 if (element.style.opacity < 1) {                 element.style.opacity -= '-0.1';                 } else {                 clearinterval(myvar);                 }             }              function mute() {             var audio = document.getelementbyid('background-audio');             var img = document.getelementbyid('audio-icon');              if (audio.muted) {                 audio.muted = false;                 img.src = 'unmute.png';             } else {                 audio.muted = true;                 img.src = 'mute.png';             }         }           document.onload = fadein();         </script>

you call fadin func onload (that's fine) create queue execute function every half second, in each iteration create queue execute functio every half sec.... sooner or later you're going kill browser this.

what you're looking more so:

function fadein() {     if (opacity < 1) {         opacity += 0.1;         settimeout(fadein, 500);     } }  document.onload = fadein();

if not purpose of learning javascript should things fadein / fadeout using css transitions rather javascript.


Comments

Post a Comment

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

-
i have password protected page on frontend. on page, want display full list of purchases associated single woocommerce product id. option 1: i've looked through woocommerce docs , , found: wc_cli_order , list_( $args, $assoc_args ) function lists orders. presumably, orders can filtered product id [--=] filter orders based on order property. line item fields (numeric array, started index zero): line_items.0.product_id option 2: i found article , based on customer id. i've modified code based on guesses meta_key , meta_value. $customer_orders = get_posts( array( 'numberposts' => -1, 'meta_key' => '_product', 'meta_value' => get_product_id(), 'post_type' => wc_get_order_types(), 'post_status' => array_keys( wc_get_order_statuses() ), ) ); how display orders single product showing recent order first? here solution put based on these articles: http://www.w...
Read more

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

-
i'm having difficult time , hope guys can help. using helicon isapi rewrite version 3.1.0.104 on our iis server. edit http.conf file , have tried , still fail. this trying do: redirect url: https://www.domain.com/switch-by-version?version=2.8.5.2594 to: https://test.domain.com/load/load.aspx?tver=2.8.5.2594 the version number @ end source url change, , need target url have same version number @ end of url example above shows. i tried following not work: rewritecond %{query_string} ^version=(\d\d?)\.(\d\d?)\.(\d\d?)\.(.*)$ [nc] rewriterule ^/switch-by-version(.*)$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l] any appreciated! thanks. if it's running in equivalent context of .htaccess , rule shouldn't start / . here's simpler version: rewritecond %{query_string} ^version=(\d+\.\d+\.\d+(?:\..+)?)$ [nc] rewriterule ^switch-by-version/?$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l]
Read more

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -

-
https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps following tutorials, try write authentication restrict admin panel, didn't understood how can that. this admin panel, admin panel don't want show , request database unauthenticated users. my laravel-routes route::get('/admin',function(){ return view('index'); }); route::get('/api/v1/employees/{id?}', 'employees@index'); route::get('/api/v1/users/{id?}', 'employees@users'); route::post('/api/v1/employees', 'employees@store'); route::post('/api/v1/employees/{id}', 'employees@update'); route::delete('/api/v1/employees/{id}', 'employees@destroy'); route::group(['prefix' => 'api'], function() { route::resource('authenticate', 'authenticatecontroller', ['only' => ['index']]); route::post('authenticate', 'authentic...
Read more