Shake
Page search box solution frequently causes problems frequently input transmission request loss performance; a timer may be provided, with the next execution time to perform the pre-purge time.
the clearTimeout ( the this .TimeId); the this .TimeId = the setTimeout (() => { // . 4 interface path splicing the this .getGoodsBySearch (value); }, 1000);
Throttling
Solve problems frequently lead to loss of performance page sends a request after bottoming out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
overflow: auto;
}
div{
height: 50px;
font-size: 20px;
padding: 5px;
/* border-bottom: 1px solid #000; */
box-shadow: 0 1px 1px 1px red;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
</body>
<script>// 是否在加载中
let isLoadding=false;distance from the top of the scroll bar to obtain 1//() {
function
document.body.onscroll =1 scrollbars event//
scrollTop = document.documentElement.scrollTop || window.pageYOffset let || document.body.scrollTop;
// 2 How to determine the scroll bar to the bottom of the scroll bar to trigger the behavior from the bottom 50px
// 2.1 div to work out the entire height of the list
let . totalDivHeight = document.querySelector ( "div") clientHeight * document.querySelectorAll ( "div" ) .length;
// 2.2 div to work out how much the entire list is higher than the body tag
the let DIS = totalDivHeight- document.body.clientHeight;
/ / 2.3 when the scroll bar when the distance from the bottom 50px triggers
iF (DIS-scrollTop <= 50 ) {
// the console.log ( "bottom la !!!");
// send asynchronous requests the code
// determines whether the request loading in
IF (isLoadding) {
//Nothing to do. .
} The else {
// tell people that we are requesting data
isLoadding = to true ;
the console.log ( "asynchronous transmission request" );
// asynchronous request successfully re-open the switch
the setTimeout (() => {
the console.log ( "data request was successful " );
isLoadding = to false ;
}, 3000 );
}
}
}
</ Script>
</ HTML>