函数节流与防抖

函数节流

    在一定时间内只会执行一次

    var timer = null;

     window.addEventListener('resize', function () {

        if (timer) {

            //函数防抖

            clearTimeout(timer);

            timer = null;

        }

        timer = setTimeout(function () {

            document.documentElement.style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth) / 10 + 'px';

        }, 300)

    })

函数防抖

    在一定时间内,存在一个定时器,那么将存在的定时器清楚掉,再开启一个新的定时器(返回最新的一次数据)

 var timer = null;

 window.addEventListener('resize', function () {

        if (timer)return;

        timer = setTimeout(function () {

            document.documentElement.style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth) / 10 + 'px';

        }, 300)

    })

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • setTimeout简介 Javascript是单线程语言,不过允许通过设置超时调用(setTimeout)和间歇...
    悄敲阅读 2,620评论 0 0
  • 最近频繁用到浏览器窗口的resize事件和页面的滚动事件(scroll),我们都知道这些事件会频繁的调用回调函数,...
    snow_in阅读 528评论 0 0
  • 函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致...
    _Dot912阅读 819评论 0 6
  • 标签:debounce throttle iplas 小编在偶然浏览Javascript技术贴吧时候,偶然看到节...
    傑仔阅读 541评论 0 2
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,060评论 0 2