在前端开发中会有用户行为会频繁的触发事件,比如疯狂的点击。对于dom操作,资源的加载等耗费性能的处理可能会导致界面的卡顿,甚至浏览器崩溃。函数节流防抖就是为了解决类似的问题产生的。
函数节流就是预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就像水滴到攒到一定重量才会滴落。
html部分有一个点击按钮,当点击的时候会显示点击的次数。
<div id="div">0</div> <button id="btn">抢</button>
script部分在点击时候限制在1秒钟只能点击一次
var div = document.getElementById("div");
var btn = document.getElementById("btn");
function throttle(handle,wait){ var lastTime = 0; return function(e){ var nowTime = new Date().getTime(); //从1900开始到现在过了多少毫秒 if(nowTime - lastTime > wait){ handle.apply(this,arguments) lastTime = nowTime; } } } function buy(e){ console.log(this,e) div.innerHTML = parseInt(div.innerHTML) + 1; } btn.onclick = throttle(buy,1000)
防抖:类似于上公交车,有人上的时候车不会走。当没有人上的时候,等一段时间再走。再互联网的应用比如说百度搜索,当输入字符的时候不会马上搜索,而是当停止输入过一段时间后自动搜索。
html 部分是一个输入框
<input type="text" id="inp">
script部分是防抖代码,一秒钟以后才会搜索
var inp = document.getElementById("inp"); var timer = null; function ajax(){ console.log(this.value); } inp.oninput = function(){ var self = this; clearTimeout(timer); timer = setTimeout(function(){ ajax.call(self) },1000) }