手写js防抖和节流方法

//防抖函数
// 防抖的概念
// 短时间内大量触发同一事件,只会执行一次函数,实现原理为设置一个定时器,约定在xx毫秒后再触发事件处理,每次触发事件都会重新设置计时器,直到xx毫秒内无第二次操作,
// 防抖常用于搜索框/滚动条/按钮点击 的监听事件处理,如果不做防抖,每输入一个字/滚动屏幕,都会触发事件处理,造成性能浪费
/**
 * func => 执行的函数体
 * wait => 等待的时间
 * immediate => 是否立即执行
 */
function debounce(func, wait, immediate) {
    //timeout => 控制间隔保存计时器的变量
    //result => 执行函数如果有返回值 最后给它 return 出去
    let timeout, result;
    //防抖函数主体
    let debounced = function () {
        //debounce(doSomeing,300);
        let context = this; //当前执行的方法的 this ,这里是 上面绑定事件的 dom
        let args = arguments; //当前执行方法里doSomeing 的 arguments
        if (timeout) clearTimeout(timeout); //如果还在运动中 清除上一次的计时器

        if (immediate) { //立即执行
            let callNow = !timeout; //默认立即执行 默认值 true
            // timeout = setTimeout 时 = true; 在等待时间后 timeout 等于null ;用户控制 callNow 变量
            timeout = setTimeout(() => {
                timeout = null;
            }, wait);

            //如果 callNow = true 执行
            if (callNow) result = func.apply(context, args); //改变执行函数内部this指向 ,并传入arguments

        } else { //非立即执行 事件结束后 等待时间 后执行
            timeout = setTimeout(function () {
                result = func.apply(context, args); //改变执行函数内部this指向 ,并传入arguments
            }, wait);
        }
        return result;
    }
    //防抖函数的取消方法
    debounced.cancel = function () {
        clearTimeout(timeout);
        timeout = null;
    }
    return debounced;
}

// 
// 节流:
// 防抖是延迟执行,而节流是间隔执行,函数节流即每隔一段时间就执行一次,实现原理为设置一个定时器,约定xx毫秒后执行事件,如果时间到了,那么执行函数并重置定时器,
// 和防抖的区别在于,防抖每次触发事件都重置定时器,而节流在定时器到时间后再清空定时器
// 应用场景 => DOM元素拖拽 射击游戏 计算鼠标距离 scroll滚动事件
/**
 * func => 绑定的方法
 * wait => 间隔的时间
 * {leading,trailing} 3中情况 不能同时为false
 * leading => true,trailing => false, 第一次会立即执行 最后一次不会调用
 * leading => false,trailing => true, 第一次不会立即执行 最后一次会调用
 * leading => true,trailing => true, 第一次会立即执行 最后一次会调用
 */
function throttle(func, wait, options) {
    let context, args, timeout, oldTime = 0;
    if (!options) options = {};
    let later = function () {
        oldTime = new Date().valueOf();
        timeout = null;
        func.apply(context, args);
    }
    return function () {
        conntext = this;
        args = arguments;
        let nowTime = new Date().valueOf();
        //第一次不会立即执行
        if (options.leading === false && !oldTime) {
            oldTime = newTime;
        }
        //判断第一次进来 会不会 立即执行
        if (nowTime - oldTime > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            func.apply(context, args);//间隔时间到了就可以执行
            oldTime = nowTime;
        }
        //判断最后一次 会不会 执行
        else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, wait);
        }
    }
}


已标记关键词 清除标记
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页