防抖与节流

防抖

防抖是指触发高频事件后n秒内函数只执行一次,如果n秒内高频事件再次触发,则重新计算时间。
防抖动是将多次执行变为最后一次执行

  • 思路: 每次触发事件之时都取消之前的延时调用方法
  • 应用: 按钮点击事件/input事件,防止用户多次重复提交
 function debounce(fn) {
       let timeout = null; // 创建一个标记用来存放定时器的返回值
       return function () {
           clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
           timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
               fn.apply(this, arguments);
           }, 500);
       };
   }
   function sayHi() {
       console.log('防抖成功');
   }

   var inp = document.getElementById('inp');
   inp.addEventListener('input', debounce(sayHi)); // 防抖

节流

高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。
节流是将多次执行变成每隔一段时间执行

  • 思路: 每次触发事件时都判断当前是否有等待执行的延迟函数
  • 应用: 鼠标/触摸屏的mouseover/touchmove事件、页面窗口的resize事件、 滚动条的scroll事件
function throttle(fn,await){
        let await = await || 250;
        let laster,timer;
        return function(){
            let now = new Date();
            if(laster && now - laster -await<0){
                clearTimeout(timer);
                timer = setTimeout(() => {
                    laster = now;
                    fn.apply(this,arguments);
                },await)
            }else{
                laster = now;
                fn.apply(this,arguments);
            }
        }
   }
   
    //调用方法
   $('body').on('mousemove', throttle(function (event) {
       console.log('tick');
   }, 1000));
发布了10 篇原创文章 · 获赞 0 · 访问量 347
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览