js函数节流
- 通常我们为使页面能展示更好的效果,我们会用js绑定一些事件实现更好的效果,但是如一些事件不需要时刻反馈出来,我们可以通过函数节流进行控制
- 使用延时器:在一定时间内只执行一次
setTimeout(fn,time)
1.基于时间的节流
<body>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
var i = 0;
function demo(){
console.log(++i);
}
function throttle(fn){
if(fn._lock){
return;
}
fn();
fn._lock = true;
setTimeout(function(){
fn._lock = false;
},1000)
}
window.onscroll = function(){
throttle(demo);
}
</script>
</body>
2.基于操作的节流(防抖)
<body>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
var i = 0;
function demo(){
console.log(++i);
}
window.onscroll = function(){
throlle(demo);
}
function throlle(fn){
clearTimeout(fn._timebar);
fn._timebar = setTimeout(fn,20);
}
</script>
</body>