javascriptは手ぶれ防止節流について理解する.
12541 ワード
まず私の個人的な理解を紹介してください.手ぶれ防止:同じイベントは短時間で何度も出発すると一回しか触発されません.スロットル:時間ごとにトリガする最も一般的なものは、検索ウィンドウのスクロール下のマウス移動イベントの例です.
<style>
div{
height: 300px;
background: #000;
line-height: 300px;
text-align: center;
color: #ffffff;
font-size: 40px;
}
</style>
<div/>
</code></pre>
<pre><code><script>
//
let myDiv = document.getElementsByTagName('div')[0]
let count = 0;
function add(){
this.innerText = count++ // this myDiv myDiv
}
myDiv.onmousemove = debounce(add)
function debounce(func){
var timeOut;
return function(){
let that = this
clearTimeout(timeOut)
timeOut = setTimeout(()=>{
//setTimeout window.setTimeout,this window
func.apply(that)
},1000)
}
}
</code></pre>
<p> ， ** </p>
<pre><code> myDiv.onmousemove = debounce(add,true) // Boolean
function debounce(func,flag){
var timeOut;
return function(){
let that = this
clearTimeout(timeOut)
if(flag){//
if(!timeOut){
func.apply(that)
timeOut = 1// !timeOut == true
}else{
timeOut = setTimeout(()=>{
func.apply(that)
},1000)
}
}else{
timeOut = setTimeout(()=>{
func.apply(that)
},1000)
}
}
}
</code></pre>
<pre><code>
， （ ）
**。 ， ，
div
</code></pre>
<pre><code>myDiv.onmousemove = throttle(add,1000) //1
function throttle(func,waitTime){
var time = 0;
return function(){
let that = this
var nowTime = Date.now()// +new Date() ; new Date().getTime()
if(nowTime - time > waitTime){
func.apply(that)
time = nowTime
}
}
}
</code></pre>
<p> </p>
</div>
</div>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1291016383865364480"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- - -->
</code></pre></div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- - 1 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
</div>
<!-- - 2 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
</div>
<!-- - 3 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top"> </h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="#!/article/122.htm" title="java " rel="nofollow">java </a>
<span class="text-muted"> ing</span>
<a class="tag" taget="_blank" href="#!/search/java/1.htm" rel="nofollow">java</a><a class="tag" taget="_blank" href="#!/search/jdk/1.htm" rel="nofollow">jdk</a>
</li>
<li><a href="#!/article/249.htm" title="Hibernate " rel="nofollow">Hibernate </a>
<span class="text-muted">caoyong</span>
<a class="tag" taget="_blank" href="#!/search/Hibernate/1.htm" rel="nofollow">Hibernate</a>
</li>
<li><a href="#!/article/376.htm" title=" Decorator（ ）" rel="nofollow"> Decorator（ ）</a>
<span class="text-muted"> </span>
<a class="tag" taget="_blank" href="#!/search/Decorator/1.htm" rel="nofollow">Decorator</a>
</li>
<li><a href="#!/article/503.htm" title=" txt， String" rel="nofollow"> txt， String</a>
<span class="text-muted"> </span>
<a class="tag" taget="_blank" href="#!/search/String/1.htm" rel="nofollow">String</a>
</li>
<li><a href="#!/article/630.htm" title="js " rel="nofollow">js </a>
<span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="#!/search/%E4%B8%89%E7%BA%A7%E8%81%94%E5%8A%A8/1.htm" rel="nofollow"> </a>
</li>
<li><a href="#!/article/757.htm" title="erlang parse_transform " rel="nofollow">erlang parse_transform </a>
<span class="text-muted">616050468</span>
<a class="tag" taget="_blank" href="#!/search/parse_transform/1.htm" rel="nofollow">parse_transform</a><a class="tag" taget="_blank" href="#!/search/%E6%B8%B8%E6%88%8F%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm" rel="nofollow"> </a><a class="tag" taget="_blank" href="#!/search/%E5%B1%9E%E6%80%A7%E5%90%8C%E6%AD%A5/1.htm" rel="nofollow"> </a><a class="tag" taget="_blank" href="#!/search/abstract_code/1.htm" rel="nofollow">abstract_code</a>
</li>
<li><a href="#!/article/884.htm" title="JAVA JSON " rel="nofollow">JAVA JSON </a>
<span class="text-muted">darkranger</span>
<a class="tag" taget="_blank" href="#!/search/java/1.htm" rel="nofollow">java</a>
</li>
<li><a href="#!/article/1011.htm" title="POJ-1273-Drainage Ditches" rel="nofollow">POJ-1273-Drainage Ditches</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="#!/search/ACM_POJ/1.htm" rel="nofollow">ACM_POJ</a>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong> ：</strong>
<a href="#!/tags/A/1.htm" rel="nofollow">A</a><a href="#!/tags/B/1.htm" rel="nofollow">B</a><a href="#!/tags/C/1.htm" rel="nofollow">C</a><a href="#!/tags/D/1.htm" rel="nofollow">D</a><a href="#!/tags/E/1.htm" rel="nofollow">E</a><a href="#!/tags/F/1.htm" rel="nofollow">F</a><a href="#!/tags/G/1.htm" rel="nofollow">G</a><a href="#!/tags/H/1.htm" rel="nofollow">H</a><a href="#!/tags/I/1.htm" rel="nofollow">I</a><a href="#!/tags/J/1.htm" rel="nofollow">J</a><a href="#!/tags/K/1.htm" rel="nofollow">K</a><a href="#!/tags/L/1.htm" rel="nofollow">L</a><a href="#!/tags/M/1.htm" rel="nofollow">M</a><a href="#!/tags/N/1.htm" rel="nofollow">N</a><a href="#!/tags/O/1.htm" rel="nofollow">O</a><a href="#!/tags/P/1.htm" rel="nofollow">P</a><a href="#!/tags/Q/1.htm" rel="nofollow">Q</a><a href="#!/tags/R/1.htm" rel="nofollow">R</a><a href="#!/tags/S/1.htm" rel="nofollow">S</a><a href="#!/tags/T/1.htm" rel="nofollow">T</a><a href="#!/tags/U/1.htm" rel="nofollow">U</a><a href="#!/tags/V/1.htm" rel="nofollow">V</a><a href="#!/tags/W/1.htm" rel="nofollow">W</a><a href="#!/tags/X/1.htm" rel="nofollow">X</a><a href="#!/tags/Y/1.htm" rel="nofollow">Y</a><a href="#!/tags/Z/1.htm" rel="nofollow">Z</a><a href="#!/tags/0/1.htm" rel="nofollow"> </a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a href="#!/" rel="nofollow"> </a> -
<a href="#!/custom/about.htm" rel="nofollow"> </a> -
<a href="#!/search/Java/1.htm" rel="nofollow"> </a> -
<a href="#!/sitemap.xml" rel="nofollow">Sitemap</a> -
<a href="#!/custom/delete.htm" rel="nofollow"> </a>
</div>
<div class="copyright"> IT CopyRight © 2000-2050 IT IT610.com , All Rights Reserved.
<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank"> ICP 09083238 </a><br/>
</div>
</div>
</footer>
<!-- -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"/>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"/>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"/>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"/>