js 函数节流和防抖

atinosun 发布于2019-08-23 12:25 / 3013人阅读

摘要：函数节流和防抖防抖和节流的作用都是防止函数多次调用。页面窗口的事件方法节流方法闭包节流防抖一段时间内触发事件只执行一次。

js 函数节流和防抖

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

throttle 节流

节流是将多次执行变成每隔一段时间执行。
每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作。

应用场景

触发mousemove事件的时候，如鼠标移动。

触发keyup事件的情况，如搜索。

触发scroll事件的时候，譬如鼠标向下滚动停止时触发加载数据。

页面窗口的resize事件

coding

方法1 节流

// function resizehandler(fn, delay){
//   clearTimeout(fn.timer);
//   fn.timer = setTimeout(() => {
//      fn();
//   }, delay);
// }
// window.onresize = () => resizehandler(fn, 1000);

方法2 闭包节流

function resizehandler(fn, delay){
    let timer = null;
    return function() {
      const context = this;
      const args=arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
         fn.apply(context,args);
      }, delay);
    }
 }
 window.onresize = resizehandler(fn, 1000);

debounce 防抖

一段时间内触发事件只执行一次。

应用场景

按钮点击事件/input事件，防止用户多次重复提交

电话号码输入的验证，只需停止输入后进行一次。

coding

function resizehandler(fn, delay, duration) {
        let timer = null;
        let beginTime = +new Date();
        return function() {
          const context = this;
          const args = arguments;
          const currentTime = +new Date();
          timer && clearTimeout(timer);
          if ((currentTime - beginTime) >= duration) {
            fn.call(context, args);
            beginTime = currentTime;
           } else {
             timer = setTimeout(() => {
               fn.call(context, args)
             }, delay);
           }
        }
      }

        window.onresize = resizehandler(fn, 1000, 1000);

Demo
CodePen-demo

参考文章  
http://www.alloyteam.com/2012...

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

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

JS之节流和防抖

摘要：节流在指定时间之内，让函数只触发一次。防抖对于一定时间段的连续的函数调用，只让其执行一次。总结以上只是很简单的写了一下节流和防抖的原理，在里，实现起来更加复杂，但是背后的原理核心就是上边代码写的。概述在平时的开发中，经常会听到两个差不多很相近的词。节流（throttle）和防抖（debounce）。这是两个类似又有些不同的优化方案。节流：在指定时间之内，让函数只触发一次。防...

fevin 2019-08-26 17:15 评论0 收藏0
前端优化 —— 函数的节流和防抖

摘要：文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多，因为这些事件的触发是连续性的，需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文前言在前端开发当中我们经常会绑定一些事件触发的某些程序执行，有时这些事件会连续触发，如浏览器窗口 s...

ralap 2019-08-23 12:18 评论0 收藏0
关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

张红新 2019-08-22 16:45 评论0 收藏0
关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

lieeps 2019-08-29 15:12 评论0 收藏0
关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

shery 2019-08-02 10:18 评论0 收藏0