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; //连续触发事件时，1s内执行一次事件 setTimeout(function(){ fn._lock = false; // fn(); },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>
