0

I'm working on a mini project where I interview people on short GIF animations. I need to let people see the GIF for 10 seconds and with my code, I've realised that the timer is inaccurate.

I've searched around and found the fix in the Sitepoint article by James Edwards. However its in Javascript and I've been trying to combine the JS and Jquery together but with no success at all.

Here

$(function() {
    //when showing image
    setTimeout(function() {
        $("#div2").fadeOut(0);
    }, 10000) //edit timer

    $('#btnclick').click(function() {
        $('#div2').show();
        setTimeout(function() {
            $("#div2").fadeOut(0);
        }, 10000)
        $('#div3').delay(10000).fadeIn(0);  //show interview
    })  
})

The code works fine but I want to implement the self-adjusting mechanism described on Sitepoint. Has anyone done this before or know how I can do this?

The HTML is here:

<div id="div1" class="div1"> 
    <!--Show image button-->
    <center>
        <input type="button" id="btnclick" value="Show me Image" />        
    </center>
</div>
<div id="div2" class="main" style="display:none;"> 
    <!--Image-->
    <img src="timer.gif"/>
</div>
<div id="div3" class="main" style="display:none;"> 
    <!--Form-->
    <form> >
    </form>

Thanks in advance.

Toni Leigh
  • 4,830
  • 3
  • 22
  • 36
user3504462
  • 57
  • 7

2 Answers2

0

In jQuery, you can simply use:

 $('#myDiv').show();
 $('#myDiv').hide();

I believe your fadeIn(0) should work too but fadeIn and fadeOut are doing an animation, and the parameters you're giving it is to do it over 0 millisecond, so it does it instantly but still has to do an animation (which isn't good for your program speed). The best way if you want optimisation is to create a css class like this:

 .is-hidden{
     display: none;
  }

And then do this in jQuery

$('#myDiv').toggleClass('is-hidden');
Yann Chabot
  • 4,789
  • 3
  • 39
  • 56
0

There's a number of questions in this post, so I'll try to address them one at a time.

jQuery is JavaScript

As a note, jQuery is a library built with JavaScript, so it just provides at convenience methods.

Use .hide() and .show()

What you're probably noticing the most for inaccuracies is probably not related to the fact that the timer is off. Does a few milliseconds make a difference to you? When you set your timeout, you try to fade out the element instantly, but that doesn't happen. After you 10 second timeout, it calls the fade, which takes time. It is likely faster to use .hide() and .show() to hide and show the element.

.delay(10000) is the same as setTimeout( function (){}, 10000)

These two sets are MOSTLY equivalent:

$('#div2').delay(10000).show();

setTimeout( function () {
  $('#div2').show();
}, 10000);

The only different is that you're using the jQuery wrapper of the timer. There may be small differences (would have to read the source code), but they should act mostly the same.

Self-adjusting Timer Situation Different?

Your situation is a little different than the self-adjusting timer example you're looking at. In the example, it's an animation that is constantly running shorter tasks on an interval with more granularity, so there's a larger set of time sets to adjust the timeout based on trends. If you're only measuring every 10 seconds, the difference is probably negligible if a user is not creating a lot of samples for your to look at. In my opinion, you'd be better offer just making your code as fast as possible. One would to do that is straight JavaScript to show and hide the div.

var div2 = document.getElementById(id);
// hide
div2.style.display = 'none';
// show
div2

.style.display = 'block';
EmptyArsenal
  • 7,314
  • 4
  • 33
  • 56
  • Hey EmptyArsenal, your answer is nice! So essentially, I should work on optimising the code because the delay (normally 1-2s) is not related to the timer but more to do with two things. 1 - Using .delay rather than .show. 2 - Using jQuery for show and hide rather than JS? Do I understand you correctly? Thank you again. – user3504462 Jul 17 '15 at 15:30
  • If the delay is 1-2 seconds, it likely has nothing to do with the timer. The likely culprits are slow code and slow load times. Using straight JavaScript (when done right) will be faster than using jQuery. If you're showing different images, the delay could be from slow load times. Consider preloading images: http://stackoverflow.com/questions/3646036/javascript-preloading-images 1. Using `setTimeout` instead of `.delay` 2. Use `.show` and `.hide` instead of `.fadeIn` and `.fadeOut` 3. JS is faster than jQuery, but I'd make this change last as it may not be noticeable. – EmptyArsenal Jul 17 '15 at 17:40