2016-06-29 211 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>

相关问题