20190726-前端笔记-防抖和节流

JasinYip 发布于2019-08-26 10:22 / 644人阅读

摘要：定义定时器清空定时器重置定时器防抖流程触发触发定义一个定时器，返回执行内容为清除当前定时器，定义执行内容。

防抖

为了避免一些监听事件为在自己预料的情况，频繁触发。or 在某些监听命令会频繁触发事件比如resize、mousemove等等

未防抖示例

       var count = 0,
          Elem = doc.getElementById("con")

        function appendCount(e) {
            console.log(e);
            
          Elem.innerHTML = count++
        }

        // 正常，没有防抖的情况下，直接监听执行
        Elem.addEventListener("mousemove", function() {
          appendCount()
        })

这会导致，只要鼠标移动，会导致Eelm.innerHTML不断改变。现在看起来好像没什么问题，如果是很多数据渲染或者请求几千条列表数据呢？

会导致浏览器不断回流和重绘。

那如何防抖呢？？

触发mousemove时间后1s内，只有不在触发mousemove方法才会能执行appendCount()。

var count = 0,
    Elem = doc.getElementById("con");
     
function debounce(fn, waitTime){
    // 定义定时器
     var timeoutFn = null;
     
     return function (){
          // 清空定时器
          clearTimeout(timeoutFn);
          // 重置定时器
          timeoutFn = (() => {
              fn.apply(this, arguments)
          },waitTime)
     }
}

function appendCount(){
    ELem.innerHTML=count++;
}

Elem.addEventListener("mousemove", debounce(appendCount, 500))

防抖流程

mousemove触发,触发debounce()`

定义一个定时器timeoutFn，返回执行内容为：清除当前timeoutFn定时器( timeoutFn = null;)，定义执行内容。

// debounce() 返回内容
function (){
      // 清空定时器
      clearTimeout(timeoutFn);
      // 重置定时器
      timeoutFn = (() => {
          fn.apply(this, arguments)
      },waitTime)
 }

当mousemove再触发，timeoutFn定时器再次清空，重新定义执行内容

只有等到最后一次mousemove，定时器没有被debounce()清除timeoutFn定时器，最后执行 fn.apply(this, agruments);

节流

相对比防抖，我是这样理解节流的:当我们想触发在一段时间范围有且只触发一次这样的事件，这样我们可以更节约我们的资源和网络请求。

就当上面的AppendCount()举例，我只想在3s内之能触发一次事件AppendCount()。

那么应该怎么处理呢？

var count = 0,
    Elem = doc.getElementById("con");

function throttle(fn,waitTime){
    var timeoutFn = null;
     
    return function () {
        // 如果存在timeoutFn定时器，则等待timeoutFn执行完成
        if(!timeoutFn){
            timeoutFn = (() => {
                // 置空定时器
                clearTimeout(timeoutFn)
                fn.apply(this, arguments)
            },waitTime)
        }     
    }
}

function appendCount(){
    ELem.innerHTML=count++;
}

Elem.addEventListener("mousemove", throttle(appendCount, 3000))

这和防抖不同的是，是等待timeoutFn执行完成后，通过clearTimeout(timeoutFn)置空，那么在3s后才能再次执行timeoutFn

还有一个写法，和上面有一点不同，上面的是当在第1s触发throttle，但是要在第4s才能执行appendCount。但是下面是立即执行，当第1s触发throttle,就执行appendCount,然后在第4s后可以再次会发throttle

var count = 0,
    Elem = doc.getElementById("con");

function throttle(fn, waitTime){
    // 定义定时器、执行状态
    var timeoutFn = null,
        isRuning = false;
     
    return function () {
        // 如果不在执行状态
       if(!isRuning){
           // 开启执行状态
           isRuning = true;
           // 定义定时器
           timeoutFn =(() => {
              fn.apply(this, arguments);
              // 执行完成，关闭执行状态
              isRuning = false;
           },waitTime)
       }
    }
}

function appendCount(){
    ELem.innerHTML=count++;
}

Elem.addEventListener("mousemove", throttle(appendCount, 3000))

参考

JavaScript专题之跟着underscore学节流

JavaScript专题之跟着underscore学防抖

云服务器 GPU云服务器 VUE防抖与节流防抖 VUE防抖函数节流

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106055.html

20190726-前端笔记-防抖和节流

摘要：定义定时器清空定时器重置定时器防抖流程触发触发定义一个定时器，返回执行内容为清除当前定时器，定义执行内容。防抖为了避免一些监听事件为在自己预料的情况，频繁触发。or 在某些监听命令会频繁触发事件比如resize、mousemove等等未防抖示例 var count = 0, Elem = doc.getElementById(con) ...

Thanatos 2019-08-02 15:37 评论0 收藏0
彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
剖析前端开发中的防抖和节流

摘要：运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。在阶段布局，最终确定显示的位置和大小。在函数中，首先定义了一个空的定时器变量，用来计算时间间隔。还有一点要注意，在中一定要清楚定时器，不然会影响的条件判断。啥是节流？节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流...

andong777 2019-08-30 15:56 评论0 收藏0
剖析前端开发中的防抖和节流

摘要：运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。在阶段布局，最终确定显示的位置和大小。在函数中，首先定义了一个空的定时器变量，用来计算时间间隔。还有一点要注意，在中一定要清楚定时器，不然会影响的条件判断。啥是节流？节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流...

LeexMuller 2019-08-26 13:35 评论0 收藏0