美文网首页
防抖和节流

防抖和节流

作者: 阿凯_8b27 | 来源:发表于2019-11-25 09:17 被阅读0次

防止在一段时间内,频繁调用,在一定延时后调用,下次触发,则清楚计时器,重新延时
//防抖
function debounce(fn, interval) {

    var timer = null;

    function delay() {

        var target = this;

        var args = arguments;

        return setTimeout(function () {

            fn.apply(target, args);

        }, interval);

    }

    return function () {

        if (timer) {

            clearTimeout(timer);

        }

        timer = delay.apply(this, arguments);

    }

};

二者都可以采用计算时间戳方式采用

节流,在一定时间内,只能调用一次

// 节流
function jieliu(fn,wait){

let timrout;

return function(){

var  context = this;

if(!timrout){

timrout = setTimeout(() => {

fn.apply(context,arguments)

},wait);

}

}

}
/**

 * 频繁触发的时候,一定时间内只执行一次

 * @param {Function} fn 回调函数

 * @param {Number} interval 触发间隔

 * @returns {function} 执行函数

 */

function throttle(fn, interval){

    var timer;

    return function(){

        var  target = this;

        if(!timer){

            timer = setTimeout(() => {

                fn.apply(target, arguments)

            }, interval);

        }

    }

}

相关文章

  • 谈谈js中的节流和防抖函数

    关于节流和防抖,这篇文章说的很好了,深入lodash源码分析防抖和节流深入篇 | Lodash 防抖和节流是怎么实...

  • JavaScript防抖和节流

    1. 认识防抖和节流 1.1. 对防抖和节流的认识 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电...

  • 前端性能优化-浅谈js防抖和节流

    浅谈js防抖和节流

  • Javascript 基础

    1、函数防抖和函数节流 【《javascript高级程序设计》里,函数节流是这里讲的函数防抖。】函数防抖: 在事件...

  • js 防抖 节流

    节流 防抖1 防抖2

  • 2019-03-27

    js的防抖和节流 据我所知防抖和节流都是为了优化作用,减轻浏览器和服务端的负担,防抖和节流俩个的英文要记住: de...

  • js的防抖和节流

    js的 防抖(debounce)和 节流(throttle ) 防抖和节流一般用于高频触发事件,属于浏览器性能优化...

  • 手写防抖和节流函数实现

    1. 认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流...

  • 实现防抖和节流

    一、认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动...

  • 2019-04-24关于节流和防抖

    节流: 应用场景: 防抖: 应用场景: 1.节流 2.防抖

网友评论

      本文标题:防抖和节流

      本文链接:https://www.haomeiwen.com/subject/ctqsvctx.html