卡顿现象，防抖与节流

卡顿现象：由于用户的操作行为过快，时间太短，导致浏览器反应不过来，回调函数内部中要计算，就会出现卡顿现象

 

 

函数的防抖与节流：

　　防抖：

　　　　概念： 前面的所有的触发都被取消，最后一次执行 在规定的时间之后才会触发。也就是说如果连续快速的触发，只会执行一次

　　　　案例：

　　　　　　let input = document.querySelector("input");

        　　　   input.oninput = _.debounce(function(){

            　　   　　console.log("ajax发请求")

        　　　　}, 1000)

        　　　　// lodash插件：里面有封装函数的防抖与节流的业务【闭包+延迟器】

        　　　　// 1、lodash函数库向外暴露_函数

        　　　　// 2、防抖的方法：_.debounce

　　节流：

 　　　　概念：在规定的时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

　　　　案例：　　　　

　　　　　　let span = document.querySelector("span");

       　　　　let button = document.querySelector("button");

　　　　　　let count = 0;

　　　　　　button.onclick = _.throttle(function(){

            　　　　// 节流：目前这个回调函数5s执行一次

            　　　　count++;

            　　　　span.innerHTML = count;

            　　　　console.log("执行")

       　　　　 }, 5000)

       　　　　 // 防抖：用户操作很频繁，但是只执行一次

      　　　　  // 节流：用户操作很频繁，但是把频繁的操作变为少量操作【可以给浏览器有充裕的时间解析代码】

        　　　　// 节流代码：闭包+延迟器