函数防抖与节流

函数防抖与节流

为了避免不断地调用绑定在事件上的函数，极大地浪费资源，对事件进行调用次数的限制。

1. 函数防抖

在事件被触发n秒后再执行事件，如果在这n秒内又被触发，则重新计时。

<input type="text">

// 获取input元素
var ipt = document.getElementsByTagName("input")[0]

function debounce(){
    var timer = null;
    var hander = arguments[0] //接受hander函数

    return function(){
        var that = this
        clearTimeout(timer)
        timer = setTimeout(function(){
            hander.call(that)  //this指向debounce 执行hander函数
        },500)
    }
     
}
ipt.oninput = debounce(hander)  //oninput 事件在用户输入时触发。
function hander(){
    console.log(this.value)
}

2. 函数节流

在一段时间内，只执行一次函数。

 <div id="show">0</div>
 <button>点击</button>

 var show = document.getElementById("show") // 获取id为show的元素
 var btn = document.getElementsByTagName("button")[0] //点击button时做累加
 
 var timer = null;
 var lastDate = 0
 btn.onclick = function(){
 	// 创建时间对象
    var newDate = new Date()
    // 新的时间-旧的时间 毫秒数大于1000时 执行函数，否则不执行 
    if(newDate - lastDate > 1000){
        var sum = +show.innerHTML
        show.innerHTML = sum + 1
        lastDate = newDate
    }
 }