2016-06-29 271 views
0

我需要通過值7作爲參數每當調用check_scroll()功能。的Javascript從一個函數傳遞變量值到另一個

但現在lastcount值不斷即使我打電話check_scroll()功能越來越多。

請保持我一些建議。

檢查代碼片段像我說的,

首先點擊first click me to initiate check_scroll function按鈕,然後在裏面div滾動,你會得到一個警報值由7

遞增然後點擊按鈕,然後再次滾動,但現在的警報無法啓動,從7

$("#mybutton").click(function() { 
 

 
    check_scroll(7); 
 

 
    }) 
 

 
    function check_scroll(val) { 
 

 
    var lastcount = val; 
 
    $('#notification_ul').scroll(function() { 
 
     if ($('#notification_ul').scrollTop() + $('#notification_ul').innerHeight() == $('#notification_ul')[0].scrollHeight) { 
 

 
      $("#notification_ul").append("<br/> Some Text Append <br/>"); 
 
      alert(lastcount); 
 

 
     lastcount = lastcount + 7; 
 
     } 
 

 
    }) 
 
    }
div { 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow: auto; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="notification_ul"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 

 
<button id="mybutton"> 
 
    first click me to initiate check_scroll function 
 
</button>

+4

每次通話時間'check_scroll()',你建立一個新的** **滾動處理程序 - 以前安裝的處理程序將繼續調用。點擊按鈕5次後,將會有5個滾動事件處理程序被調用。每個人都會從7開始使用'lastcount',但每個滾動事件都會增加計數器。 – Pointy

+0

對不起,如何解決它。每當我點擊按鈕時,我需要從7增加。 –

+0

在全局函數外聲明'lastcount = 7'。不要在check_scroll中傳遞它,並且像現在一樣在函數中繼續遞增。 – Bsienn

回答

1
  • 定義scroll事件只有一次
  • 移動lastcount
  • 單擊該按鈕時,重置lastcount
$(function(){ 
    var lastcount = 0; 

    $("#mybutton").click(function() { 
     check_scroll(7); 
    }); 

    $('#notification_ul').scroll(function() { 
     if (lastcount !== 0) { 
      if ($('#notification_ul').scrollTop() + $('#notification_ul').innerHeight() == $('#notification_ul')[0].scrollHeight) { 
       $("#notification_ul").append("<br/> Some Text Append <br/>"); 
       console.log(lastcount); 
       lastcount = lastcount + 7; 
      } 
     } 
    }); 
}); 

function check_scroll(val) { 
    lastcount = val; 
} 
+0

感謝@iownthegame的答案,你的解決方案工作,和你的解釋也不錯 –

+0

和1個多疑問,爲什麼。實際上這是怎麼發生的?你能否多解釋一下 –

+0

其實我不知道會發生什麼,我也想讓別人告訴我爲什麼,但是我的知識告訴我只綁定一次事件,參見http:// stackoverflow。 com/questions/8408826/bind-event-only-once和http://stackoverflow.com/questions/2180326/jquery-event-model-and-preventing-duplicate-handlers – iownthegame

0

最終的答案指你的建議後,感謝你們的快速解決方案和建議。大拇指

var lastcount = 7; 
 
$("#mybutton").click(function() { 
 
\t check_scroll(7); 
 
}) 
 

 
$('#notification_ul').scroll(function() 
 
{ 
 
    if ($('#notification_ul').scrollTop() + $('#notification_ul').innerHeight() == $('#notification_ul')[0].scrollHeight) 
 
    { 
 
\t \t 
 
    $("#notification_ul").append("<br/> Some Text Append <br/>"); 
 
    
 
    alert("last count after scroll " + lastcount); 
 
\t \t 
 
    lastcount = lastcount + 7; 
 
    } 
 

 
}) 
 

 
function check_scroll(val) { 
 
\t lastcount = val; 
 
\t alert("Last count reseted to " + lastcount); 
 
}
div { 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow: auto; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="notification_ul"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 

 
<button id="mybutton"> 
 
    sometext 
 
</button>

相關問題