2017-10-25 17 views
2

ユーザーがスクロールバーのスクロールを開始すると自動的にスクロールを開始するページがあります。しかし、私は一定時間後にスクロールが止まるようにしたい。以下は私が今までに持っているものですが、うまくいきません。私は「復帰」とは思わない。私が使用すべき正しい機能ですが、動作するものは何も見つかりません。一定時間後にJavascriptの機能を削除する方法

function scrollFunction() { 
 
    window.scrollBy(0, 10); 
 
} 
 

 
window.onscroll = scrollFunction; 
 

 
setTimeout(function scrollFunction() { 
 
    return; 
 
}, 2000);
<div style="height:1000px; background-color:red;"></div> 
 
<div style="height:1000px; background-color:green;"></div> 
 
<div style="height:1000px; background-color:blue;"></div> 
 
<div style="height:1000px; background-color:black;"></div>

+0

作成した2つの関数は、互いに関係ありません。 –

答えて

5

あなたが作成した2つの機能は、お互いに何の関係もありません。彼らが同じ名前を持っているという事実は無関係です。

setTimeoutは、今後いくつかの作業をスケジュールするために使用されます。しかし、setTimeoutに渡す関数は何もしないので、不要です。

代わりに、関数が最初に呼び出された時刻を記録し、関数が呼び出されるたびに経過した時間を確認する必要があります。十分な時間が経過した場合は、イベントの再起動を防ぐためにwindow.scrollBy(0, 10)に再度電話しないでください。

var startTime; 
 
function scrollFunction() { 
 
    if (!startTime) { 
 
    // Called for the first time 
 
    startTime = Date.now(); 
 
    } else if (Date.now() - startTime > 2000) { 
 
    // Stop condition. Have 2 seconds passed? 
 
    startTime = null; 
 
    return; 
 
    } 
 
    window.scrollBy(0, 10); 
 
} 
 

 
window.onscroll = scrollFunction;
<div style="height:1000px; background-color:red;"></div> 
 
<div style="height:1000px; background-color:green;"></div> 
 
<div style="height:1000px; background-color:blue;"></div> 
 
<div style="height:1000px; background-color:black;"></div>

0

あなたが探しているかもしれないものを、時間のX量の後にタイムアウトをJavaScript関数を殺したい場合:

Does calling setTimeout clear the callstack?

は、setTimeout関数を使用してみてください:

setTimeout(function(){ alert("Hello"); }, 3000); 
このリンクから

:あなたの特定のユースケースのためにそう

https://www.w3schools.com/jsref/met_win_settimeout.asp

var startTime; 
var stopTime; 
function scrollFunction() { 

    startTime = Date.now(); 


function testFunction() { 
    alert("Test"); 
} 

if (x > y) { 
     stopTime = Date.now() - startTime 
     setTimeout(function(){ testFunction(); }, stopTime); 
    } 

お役に立てば幸いです。

+0

タイムアウトはどのくらい正確に関数を "kill"しますか? –

0

自動スクロールを停止するには、デフォルトでオンになっています。つまり、値1です。この変数をゼロに設定すると、window.scrollBy()は実行されませんが、 scrollFunction()はまだかなり生きています。したがって、タイマーがない場合、コードはwindow.onscrollを返す以外の何もしない無名関数に設定し、scrollFunctionを手数料の外にレンダリングします。

var timer = 1; 
 
var elapsed = 5000; 
 
var start = Date.now(); 
 

 
function scrollFunction() { 
 
    var now = Date.now(); 
 
    
 
    if (timer) { 
 
    window.scrollBy(0, 10); 
 
    if (now - start > elapsed) { 
 
     timer=0; 
 
     return; 
 
    } 
 
    } 
 
    else 
 
    { 
 
    window.onscroll = function(){ 
 
     return; 
 
    }; 
 
    } 
 
} 
 

 

 
window.onscroll = scrollFunction;
<body> 
 

 
<div style="height:1000px; background-color:red;"> 
 

 

 

 
</div> 
 

 
<div style="height:1000px; background-color:green;"> 
 

 

 

 
</div> 
 

 
<div style="height:1000px; background-color:blue;"> 
 

 

 

 
</div> 
 
<div style="height:1000px; background-color:black;"> 
 

 

 

 
</div> 
 
</body>

注、私は@FelixKlingは開始時間をキャプチャするDate.now()を使用して変数を設定してやったことが好きです。だから、私はDate.nowを使ってグローバルな開始点とローカルのnow変数を設定します。

+1

タイムアウトは完全に不要です。 'setTimeout'に渡す関数は何もしません。 –

+0

私はそれが動作しないと言っているわけではありません。クリックするとスクロールが止まりますが、OPが望んでいるかどうかわかりません。しかし、 'timer'フラグのためだけに動作します。 't'を呼び出し、' setTimeout'を呼び出すことは全く必要ありません。それを削除すると同じように動作します:https://jsfiddle.net/h6k1kjcu/。 –

+0

@FelixKlingあなたが正しいと私はタイムアウトコードを削除しました - あなたのフィードバックに感謝します。 – slevy1

関連する問題