JQuery setTimeout inside for loop

Today I was amazed with a question asked by one of my IT friends. 

What’ll be the output of setTimeout function if I declare it inside the for loop like this.

 

  1. for(i=0;i<3;i++)
  2. {
  3.     console.log(i);
  4. }
  5.  

 

My answer was 

 

  1. 0
  2. 1
  3. 2
  4.  

 

But the answer was not correct as he challenged and I checked it too. The answer was ‘2’ only.

 

I tried to know why the output is so. I thought that this is because of threading it’ll be skipping the setTimeout function some time due to thread concept. But when I changed the condition to i<10000, but the output was same. Finally I’s not able to know the situation and problem.

 

At last I searched on forems, and I got my answer which is as follows:

The function argument to setTimeout is closing over the loop variable. The loop finishes before the first timeout and displays the current value of i, which is 4.

Because JavaScript variables only have function scope, the solution is to pass the loop variable to a function that sets the timeout. You can declare and call such a function like this:

 

  1. for (var i = 0; i < 3; i++) {
  2.     (function (x) {
  3.         setTimeout(function () { alert(x); }, 100);
  4.     })(i);
  5. }

 

You might also check this Q/A on stackoverflow

Posted in Function, JQuery, Programming by Leave a comment

Binary Sorting Using PHP

CODE:

  1.  
  2. <?php
  3. $a = array();
  4. //get values to swap
  5. for($b=0;$b<10;$b++)
  6. {
  7.     $a[]=rand(99,999);
  8. }
  9. echo "<div style='float: left;margin-right: 20px;'>Before Sorting<br/>";
  10. for($b=0;$b<sizeof($a);$b++)
  11. {
  12.     echo $a[$b]."<br/>";
  13. }
  14. echo "</div>";
  15. //swap started
  16. for($i=0;$i<sizeof($a);$i++)
  17. {
  18.     for($j=0;$j<sizeof($a);$j++)
  19.     {
  20.         $swap="";
  21.         if($j<(sizeof($a)-1) && $a[$j]>$a[$j+1])
  22.         {
  23.             $swap=$a[$j];
  24.             $a[$j]=$a[$j+1];
  25.             $a[$j+1]=$swap;
  26.         }
  27.     }
  28. }
  29. echo "<div style='float: left;margin-right: 20px;'>After Sorting<br/>";
  30. for($b=0;$b<sizeof($a);$b++)
  31. {
  32.     echo $a[$b]."<br/>";
  33. }
  34. echo "</div>";
  35. echo "<div style='float: left;margin-right: 20px;'>In Descending Order<br/>";
  36. for($b=(sizeof($a)-1);$b>-1;$b--)
  37. {
  38.     echo $a[$b]."<br/>";
  39. }
  40. echo "</div>";
  41. ?>
  42.  

 

OUTPUT:

Before Sorting
831
507
410
677
970
838
748
705
206
978
After Sorting
206
410
507
677
705
748
831
838
970
978
In Descending Order
978
970
838
831
748
705
677
507
410
206

Posted in Programming by Leave a comment

Too Simple LightBox PopUp Window

Hey guys, girls,

Here I’m going to teach you too simple lightbox popup window to see it before.

Add these lines into your body tag whenever you want. If may be you can arrange it according to your requirement. But make sure to be having position:fixed; and z-index:100 or 100+;

  1. <div id="divPopUp" style="border: solid 3px #408080;position: fixed;top: 5%;left: 20%;width: 60%;height: 70%;background: #002200;colr: #d9e3e8;z-index: 101;"></div>

And then add these JavaScript code to yor head tag

  1. function hidePopUp(){    
  2.     $('#divPopUp').html('');    
  3.     $('#divPopUp').hide();
  4. }
  5. $(document).ready(function(){    
  6.     $('#divPopUp').hide();
  7.     $('.small_image').click(function(){
  8.     $('#divPopUp').html('</p><div align="center">---------------Here Add Your Tag/Content whatever you want---------------<br/><span onclick="hidePopUp()" style="cursor: pointer">CLOSE</span></div>');     
  9.     $('#divPopUp').show();  
  10.     });
  11. });

Here is a complete example of code which I have used it for image gallery section:

  1. <html>
  2.     <head>
  3.         <script>
  4.             function hidePopUp(){
  5.                 $('#divPopUp').html('');
  6.                 $('#divPopUp').hide();
  7.             }
  8.             $(document).ready(function(){
  9.                 $('#divPopUp').hide();
  10.                 $('.small_image').click(function(){
  11.                     var largeImageSrc=$(this).attr('src');
  12.                     largeImageSrc=largeImageSrc.replace('small','big');
  13.                     $('#divPopUp').html('<div align="center"><img src="'+largeImageSrc+'"/><br/><span onclick="hidePopUp()" id="btnClose" style="cursor: pointer">CLOSE</span></div>');
  14.                     $('#divPopUp').show();
  15.                 });
  16.             });
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <?php
  21.         echo '<ul class="gallerylist">';
  22.         while($row=mysql_fetch_array($result))
  23.         {
  24.             echo '<li><div align="center" style="">'.$row['image_name'].'</div><img class="small_image" style="cursor:pointer;" src="admin/gallery_image/small/'.$row['image_id'].'.'.$row['image_ext'].'"/></li>';
  25.         }
  26.         echo '</ul>';
  27.         ?>
  28. <div id="divPopUp" style="border: solid 3px #408080;position: fixed;top: 5%;left: 20%;width: 60%;height: 70%;background: #002200;color: #d9e3e8;z-index: 101;"></div>
  29.     </body>
  30. </html>

 

See the Pen Light Box by AHMAD ASJAD (@ahmadasjad) on CodePen.0

Happy coding!!!!!!!

Posted in Programming by Leave a comment