函数的防抖和节流

MasonEast 发布于2019-08-26 14:00 / 1223人阅读

摘要：当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行原理第一次调用函数创建一个定时器，指定的时间间隔后运行代码。第二次调用函数时，它会清除前一次的定时器并设置另一个。

目的：节约性能开销，避免多次频繁的触发业务逻辑造成页面卡顿。

应用场景：节流和防抖的核心其实就是限制某一个方法被频繁触发，
比如说DOM事件的监听回调，input的keyup、keydown，window.scroll,window.resize事件，按钮连续{{BANNED}}点击导致无限制发送接口请求等应用场景

防抖

一个需要频繁触发的函数，在规定的时间内，只执行最后一次，前面的触发不执行。(当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行)

原理

第一次调用函数创建一个定时器，指定的时间间隔后运行代码。第二次调用函数时，它会清除前一次的定时器并设置另一个。

let debounce = function(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
};
let box = document.getElementById("app");
box.onmousemove = debounce(function(e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 100);

节流

一个函数执行一次后只有大于设定的执行周期才会执行第二次。(指连续触发事件但是在 n 秒中只执行一次函数)

原理

用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达规定时间段，如果是，则执行，并更新上次执行的时间戳，这样循环下去

function throttle(func, delay) {
  let run = true;
  return function() {
    if (!run) {
      return;
    }

    run = false;
    setTimeout(() => {
      func.apply(this, arguments);
      run = true;
    }, delay);
  };
}

box.onmousemove = throttle(function(e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 500);

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

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

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

函数的防抖和节流是个啥？？？

摘要：函数防抖和节流，都是控制事件触发频率的方法。封装一个函数，让持续触发的事件监听是我们封装的这个函数，将目标函数作为回调传进去，等待一段时间过后执行目标函数第二点实现了，再看第一点持续触发不执行。曾经面试时候被问到过这个，年少的我一脸无知。。。后来工作中遇到了一个场景：输入名称的同时去服务器校验名称是否重复，但发现之前的代码竟然都没做限制，输入一次发一次请求。简直忍不了，就在项目的u...

edagarli 2019-08-23 18:35 评论0 收藏0
剖析前端开发中的防抖和节流

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

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

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

LeexMuller 2019-08-26 13:35 评论0 收藏0
小菊花课堂之JS的防抖与节流

摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。前言陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。详解在前端开发中，我们经常会碰到一些会持...

leoperfect 2019-08-23 13:53 评论0 收藏0