if文でアニメーション関数を実行

Question

私はページロード時にアニメーションを読み込むドーナツチャートを持っています。ユーザーがdivにスクロールしたときにアニメーションを実行させようとしています。私はif文の内部で関数を呼び出したが、動作していないように私のjavascriptファイルの先頭

$(window).scroll(function() { 

    var hT = $('#token-stats').offset().top, 
     hH = $('#token-stats').outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    console.log((hT - wH), wS); 
    if (wS > (hT + hH - wH)) { 
     alert('pie!'); 
     drawDoughnutChart(); 
     $(window).off('scroll') 
    } 
}); 

でそのため、このコードブロックを持っています。ここでは、私が使用している正確なコードのフィドルですhttps://jsfiddle.net/cmLkbq6e/

アラートはうまくいきます、私は間違っていますか？

Answer 1

スコープの問題があるようです。

ドーナツグラフの描画をjQueryの準備機能の外にある独自の関数drawDoughnotChart()にラップし、jQueryの準備関数から呼び出します。この方法でdrawDoughnutChart（）は、$(window).scrollイベントハンドラのスコープ内にあります。また、1つのチャートしか表示されないようにするには、チャートイニシャライザの前に$("#doughnutChart").empty()と入力します。ページのトップにdoughnutChart距離、相対を保存する必要があります（あなたがチャートを表示する際に知っている）

function drawDoughnutChart() { 

    $("#doughnutChart").empty(); 

    $("#doughnutChart").drawDoughnutChart([ 
    { title: "test",   value : 43, color: "#e65c53" }, 
    { title: "test", value: 29, color: "#26a3b1" }, 
    { title: "test",  value: 21, color: "#19818d" }, 
    { title: "test",  value : 3.5, color: "#396b7e" }, 
    { title: "test",  value : 3.5, color: "#a5a5a5" } 
    ]); 
} 

Answer 2

まず

そして、ユーザーがスクロール実行されるイベントリスナーを作成します。

最後に、ifステートメントを作成して、現在のウィンドウ距離がdoughnutChart距離以上かどうかを確認し、アニメーションを実行してください。

const doughnutChart = document.querySelector('.chart').offsetTop; 

function checkScroll() { 
    if (window.scrollY >= doughnutChart) { 
     $("#doughnutChart").drawDoughnutChart([ 
     { title: "test",   value : 43, color: "#e65c53" }, 
     { title: "test", value: 29, color: "#26a3b1" }, 
     { title: "test",  value: 21, color: "#19818d" }, 
     { title: "test",  value : 3.5, color: "#396b7e" }, 
     { title: "test",  value : 3.5, color: "#a5a5a5" } 
     ]); 

     // remove listener so scroll doesn't create many charts 
     removeEventListener('scroll', checkScroll); 
    } 
} 

window.addEventListener('scroll', checkScroll);