0

水平方向にスクロール可能な画像を表示するdivがあり、white-space:nowrap; overflow-x:scroll以下の機能を機能させようとしています:

var mouseIsInDiv = false;
function autoScroll() {
var i = 1;
while (mouseIsInDiv = false) {
    setTimeout(function(){
    document.getElementById("theDiv").scrollLeft = i;
    i++;
    },50);
}
}

(マウスがこのスクロール可能な div 内にない間) ループして、50 ミリ秒ごとにスクロール位置を 1px ずつインクリメントすることになっています。つまり、この関数が呼び出されたときに、画像を自動的にスクロールすることになっています。構文エラーは発生していませんが、Web ページでこの関数を呼び出すボタンを押すたびに、ブラウザーが完全にクラッシュします。最新バージョンの Chrome、Safari、および Firefox を使用しています。どんなアイデアでも本当に役に立ちます。私はこれで髪を引き裂いています!

4

2 に答える 2

0

ループは、同じ時間 (50 ミリ秒後) に発生する多くのタイムアウトを作成します。set timeout 関数内でタイムアウトを再帰的に設定し、set timeout 関数内でも mouseISInDiv かどうかを尋ねる必要があります。

現在のコードの状態では、ループが短時間に何度も実行され、ページがクラッシュし (まるで無限のようです)、50 ミリ秒後に多くの設定されたタイムアウトが実行されます。

于 2013-02-28T22:55:50.383 に答える
0

楽しい時間を過ごせたので、正解はすでに受け入れられていますが、回答を投稿します。

基本的に、スキーム全体が非同期になるようにすべてを再構築する必要があります。つまり、イベント リスナーはマウスの動きに応答し、while ループはありません。

したがって、私はこのフィドルを提示します。これがJavaScriptです：

var mouseIsInDiv = false;
var theDiv = document.getElementById("theDiv");
theDiv.onmouseover = function() { mouseIsInDiv = true; };
theDiv.onmouseout = function() {
    mouseIsInDiv = false;
    scrollLeft1();
};

function scrollLeft1() {
  if (mouseIsInDiv == false && theDiv.scrollLeft < theDiv.clientWidth) {
    theDiv.scrollLeft += 1;
    setTimeout(scrollLeft1, 50);
  }
}

scrollLeft1();

ご覧のとおり、この関数は自分自身を再帰的かつ非同期的に呼び出し、スクロールを手動でリセットした後に全体を再起動できます。スクロール完了のイベント リスナーを追加することもできます。

于 2013-02-28T23:22:30.817 に答える