setIntervalは高速化しているようですか？

私は自分のイメージスライダーを設計しようとしているあなたはここでそれを見ることができます：http://nitrous-networks.co.uk/webdev/setIntervalは高速化しているようですか？

を私はしかし、私はあなたがすぐに一度スライドナビゲーションを数回クリックしたときに気づいた、周りのスライドを変更するのsetIntervalを使用していますアニメーションはsetIntervalのスピードに追いついて変化するようです。デフォルトでは8000millisでなければなりませんが、時間が経つにつれて、理由もなく1000になるでしょう。 http://jsfiddle.net/OwenMelbz/e7eEe/

HTMLマークアップ：：

<!-- Slider Start --> 
<div id="slider" class=""> 
    <div id="slide-wrap"> 
    <ul> 
     <li>slide 1</li> 
     <li>slide 2</li> 
     <li>slide 3</li> 
     <li>slide 4</li> 
     <li>slide 5</li> 
     <li>slide 6</li> 
     <li>slide 7</li> 
    </ul> 
    <div class="slide-controller"></div> 
    </div> 
</div><!-- /slider -->

CSS

#slide-wrap { 
width:960px; 
height:100%; 
margin: 0 auto; 
position: relative; 
} 
#slider { 
width:100%; 
height:200px; 
color: white; 
background-color: #000; 
background-image: url('http://nitrous-networks.co.uk/webdev/images/sliderbg.png'); 
background-repeat: no-repeat; 
background-position: center -200px; 
-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1); 
-moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1); 
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1); 
position: relative; 
} 
#slider ul{ 
width:960px; 
height:100%; 
margin: 0 auto; 
overflow: hidden; 
position: relative; 
} 
#slider ul li { 
width:960px; 
height:200px; 
} 
.slide-controller { 
position: absolute; 
left: 3px; 
top: 50%; 
height: 150px !important; 
width:20px !important; 
margin-top: -75px; 
border-radius: 10px; 
background-color: #000; 
-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1); 
-moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1); 
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1); 
background: rgb(22,22,22); /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE2MTYxNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ2JSIgc3RvcC1jb2xvcj0iIzBkMGQwZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iIzBhMGEwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzIzMjMyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg3JSIgc3RvcC1jb2xvcj0iIzFlMWUxZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjFiMWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(left, rgba(22,22,22,1) 0%, rgba(13,13,13,1) 46%,  rgba(17,17,17,1) 50%, rgba(10,10,10,1) 53%, rgba(35,35,35,1) 76%, rgba(30,30,30,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(22,22,22,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(17,17,17,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(35,35,35,1)), color-stop(87%,rgba(30,30,30,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(22,22,22,1) 0%,rgba(13,13,13,1) 46%,rgba(17,17,17,1) 50%,rgba(10,10,10,1) 53%,rgba(35,35,35,1) 76%,rgba(30,30,30,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(22,22,22,1) 0%,rgba(13,13,13,1) 46%,rgba(17,17,17,1) 50%,rgba(10,10,10,1) 53%,rgba(35,35,35,1) 76%,rgba(30,30,30,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(22,22,22,1) 0%,rgba(13,13,13,1) 46%,rgba(17,17,17,1) 50%,rgba(10,10,10,1) 53%,rgba(35,35,35,1) 76%,rgba(30,30,30,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */ 
background: linear-gradient(left, rgba(22,22,22,1) 0%,rgba(13,13,13,1) 46%,rgba(17,17,17,1) 50%,rgba(10,10,10,1) 53%,rgba(35,35,35,1) 76%,rgba(30,30,30,1) 87%,rgba(27,27,27,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#1b1b1b',GradientType=1); /* IE6-8 */ 
} 
.blip {width:10px;height:10px;border-radius:5px;margin: 0 auto;margin-top:10px;opacity:0.7;} 
.blip:hover {opacity:1;cursor: pointer;} 
.currentslide{opacity:1 !importantbackground: rgb(255,48,25); /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzAxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZjA0MDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(left, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* IE10+ */ 
background: linear-gradient(left, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1); /* IE6-8 */ 
} 
.inactiveslide{background: rgb(226,226,226); /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2QxZDFkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWZlZmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */ 
background: linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1); /* IE6-8 */ 
}

Javascriptを

ここ

は、スクロールコードとフィドルです

$(document).ready(function() { 

//Setup Variables 
var slidecount = 1; 
var slidepos = 0; 
var pos = ['-1', '-1', '199', '399', '599', '799', '999', '1199']; 
var slideid = 2; 
//var message = 'vars setup'; 
var Interval; 

var slideSpeed = 8000; //Milliseconds 

// Turns Slider List Objects into the Controller blips & Applied Class's 
$('#slider li').each(function() { 
    $('.slide-controller').append('<div data-slide="' + slidecount + '" class="blip inactiveslide"></div>'); 
    $(this).attr('id', 'slide-' + slidecount); 
    slidecount++; 
    $('.blip:first').removeClass('inactiveslide').addClass('currentslide'); 
    //message = 'list setup'; 
    //console.log(message); 
}); 

slidecount = 1; 

// Change Slide Function 


function ChangeSlide(e) { 
    slidepos = pos[e]; 
    var bgshift = slidepos * -1; 
    bgshift = bgshift/2; 
    //scrolls to position 
    $('#slider ul').animate({ 
     scrollTop: slidepos 
    }, 1000); 
    $('#slider').animate({ 
     'background-position-y': bgshift 
    }, 1500); 
    //remove old active button 
    $('.currentslide').removeClass('currentslide').addClass('inactiveslide'); 
    //changes active button 
    $('.blip[data-slide=' + e + ']').removeClass('inactiveslide').addClass('currentslide'); 
    slidepos++; 
    //message = 'changeslide run! vars: slidepos='+slidepos+''; 
    var message = 'rotatetimer: ' + RotateTimer + ' Interval:' + Interval + ' speed:' + slideSpeed; 
    console.log(message); 

} 

//Controller Function 
$('.blip').live('click', function() { 
    slideid = $(this).attr('data-slide'); 
    ChangeSlide(slideid); 
    //message = 'clicked! slideid:'+slideid; 
    //console.log(message); 
    clearInterval(Interval); 
    RotateTimer = setTimeout(GoGo, slideSpeed); 
}); 

// Auto Rotate 


function Rotate() { 
    var currentslide = $('.currentslide').attr('data-slide'); 
    var nextslide = currentslide; 
    nextslide++; 
    if (nextslide == "8") { 
     nextslide = 1; 
    } 
    ChangeSlide(nextslide); 
    //message = 'Rotate Run! vars: currentslide='+currentslide+' nextid='+nextslide; 
    //console.log(message); 
} 

//Starts The Auto Rotate and Runs it Every 8 Seconds 


function GoGo() { 
    Interval = setInterval(Rotate, slideSpeed); 
} 

//Triggers the Rotate After 3 Seconds 
var RotateTimer = setTimeout(GoGo, slideSpeed); 
//console.log(RotateTimer); 
});

基本的には、時間の経過とともにスピードアップする可能性があります。

おかげ

オーウェン

出典

2012-03-24 Owen

ライブリンクは、質問への便利*補助*であってもよいが、常に関連するコード/マークアップを入れることができます**質問自体に**。理由：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question –

申し訳ありませんが、その数多くのコード、そして私はページを洪水したくなかった – Owen

これはポイントです。問題を小さなコードサンプルに分解し、他の人がそれを読んで解決策を提案できるようにする必要があります。それ以外の場合、誰もがそのコードをすべて調べなければなりません。 – j4y

あなたがてclearTimeoutを持っていけないし、それはあなたがあまりにもいくつかのてclearIntervalを逃すようであります。

あなたのsetTimeoutとGoGo機能は役に立たないと思います。

は、ここに訂正JSです：他のサイトへ

$(document).ready(function() { 

    //Setup Variables 
    var slidecount = 1; 
    var slidepos = 0; 
    var pos = ['-1', '-1', '199', '399', '599', '799', '999', '1199']; 
    var slideid = 2; 
    //var message = 'vars setup'; 
    var Interval; 

    var slideSpeed = 8000; //Milliseconds 

    // Turns Slider List Objects into the Controller blips & Applied Class's 
    $('#slider li').each(function() { 
     $('.slide-controller').append('<div data-slide="' + slidecount + '" class="blip inactiveslide"></div>'); 
     $(this).attr('id', 'slide-' + slidecount); 
     slidecount++; 
     $('.blip:first').removeClass('inactiveslide').addClass('currentslide'); 
     //message = 'list setup'; 
     //console.log(message); 
    }); 

    slidecount = 1; 

    // Change Slide Function 


    function ChangeSlide(e) { 
     slidepos = pos[e]; 
     var bgshift = slidepos * -1; 
     bgshift = bgshift/2; 
     //scrolls to position 
     $('#slider ul').animate({ 
      scrollTop: slidepos 
     }, 1000); 
     $('#slider').animate({ 
      'background-position-y': bgshift 
     }, 1500); 
     //remove old active button 
     $('.currentslide').removeClass('currentslide').addClass('inactiveslide'); 
     //changes active button 
     $('.blip[data-slide=' + e + ']').removeClass('inactiveslide').addClass('currentslide'); 
     slidepos++; 
     //message = 'changeslide run! vars: slidepos='+slidepos+''; 
     var message = 'rotatetimer: ' + RotateTimer + ' Interval:' + Interval + ' speed:' + slideSpeed; 
     console.log(message); 

    } 

    //Controller Function 
    $('.blip').live('click', function() { 
     clearInterval(Interval); 
     Interval = setInterval(Rotate, slideSpeed); 
     slideid = $(this).attr('data-slide'); 
     ChangeSlide(slideid); 
     //message = 'clicked! slideid:'+slideid; 
     //console.log(message); 

    }); 

    // Auto Rotate 


    function Rotate() { 
     var currentslide = $('.currentslide').attr('data-slide'); 
     var nextslide = currentslide; 
     nextslide++; 
     if (nextslide == "8") { 
      nextslide = 1; 
     } 
     ChangeSlide(nextslide); 
     //message = 'Rotate Run! vars: currentslide='+currentslide+' nextid='+nextslide; 
     //console.log(message); 
    } 

    //Starts The Auto Rotate and Runs it Every 8 Seconds 

    //Triggers the Rotate After 3 Seconds 
    // var RotateTimer = setTimeout(GoGo, slideSpeed); 
    //console.log(RotateTimer); 

Interval = setInterval(Rotate, slideSpeed);

出典

2012-03-24 17:46:11 Vodun

ああ、魅力的な作品ですが、正確に何をしましたか、それを見つけられませんでした！ – Owen

コントローラ機能の後にブロックを見てください。ユーザーがクリックしたときに新しい間隔を設定する前に、Intervalが実行されていないことを確認します。そして、私が言ったように、私はGoGoの機能を削除します。 – Vodun

setIntervalは高速化しているようですか？

答えて

関連する問題