前端防抖和节流小白基础_节流使用帮助

窗口的resize、scroll、输入框内容校验等操作时,如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时,在这种情况下如果事件触发的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少触发的频率,同时又不影响实际效果。防抖在事件被触发n秒之后执行,如果在此期间再次触发事件

前端防抖和节流小白基础

窗口的resize、scroll、输入框内容校验等操作时,如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时,在这种情况下如果事件触发的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少触发的频率,同时又不影响实际效果。

前端防抖和节流小白基础_节流使用帮助

防抖

我们模拟输入表单数据,自动获取后台数据,联想搜索,反馈回前台。监听keyup事件,如果每次输入一个字符,就发送一次请求,那么将在极短的时间发送非常多次请求,后台服务器不堪重负!

// 监听input值 模糊搜索 防止一直搜索
<input id="phone" type="text"/>
// 需要触发的函数
function debounce(d){
    console.log("联想搜索phoneNumber:" + d)
}
let inp = document.querySelector("#phone");
// 输入触发的事件
function getPhone(fn,delay){
    let timer;
    // 使用闭包,保证每次使用的定时器是同一个
    return (d)=>{
        clearTimeout(timer);
        timer = setTimeout(()=>{
            fn(d);
            // 结束之后清除定时器
            clearTimeout(timer);
        },delay)
    }
}

let getPhoneDebounce = getPhone(debounce,1000);

inp.addEventListener('keyup',(e)=>{
    getPhoneDebounce(e.target.value);
})

/**
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行,false 表非立即执行
 */
function debounce(func,wait,immediate) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

节流

我们模拟射击,首先第一次点击射击的时候,打出一发子弹,当以极短的时间再次点击射击的时候,由于需要‘冷却’——也就是节流,再次点击无效,当冷却时间过了之后,再次点击射击,则继续下一次射击
准备工具:一个射击的函数shot, 一个判断射击间隔是否结束的函数nextShot,一个触发射击的按钮,判断射击是否结束的定时器timer
基本思路:第一次点击按钮的时候,触发shot,当继续点击的时候,射击无效,只有过了定时器设置的时间才可以继续射击。

// 模拟射击
<button id="shot">射击</button>
function shot(){
    console.log('射击')
}
let btn = document.querySelector('#shot');
function nextShot(fn,delay){
    let timer;
    // 闭包原理同上
    return ()=>{
        // 定时器存在,无法射击
        if(timer){
            console.log('禁止射击');
        }else{  // 定时器不存在,射击,并设置定时器
            fn();
            timer = setTimeout(()=>{
                // 定时器结束,可以射击
                clearTimeout(timer);
                timer = null;
            },delay)
        }
    }
}
let start = nextShot(shot,20);
btn.addEventListener('click',()=>{
    start();
})
海计划公众号
(0)
上一篇 2020/03/22 01:26
下一篇 2020/03/22 01:26

您可能感兴趣的内容

  • 代码重构!你敢吗?菜鸟教程下载_重构基础入门

    今天讲述一个代码重构的经历。2014年,我从基础架构部门,转调到业务部门。技术负责人想让我搞定业务系统的稳定性问题。当时的业务系统确实存在不少问题,不过我初来乍到,对整体系统不熟悉,就想在熟悉一段时间后再动手。没想到,后面是事情自己找上了门。那是一个周六的早上,我当时不在广州,而是去了深圳,去一个同学家。当时跟我同学聊的尽兴,就一直没看手机,间隔了一个多小时

    2020/03/30
  • rem js相关入门攻略_rem基础入门

    !function(n){var e=n.document,t=e.documentElement,i=720,d=i/100,o=”orientationchange”in n?”orientationchange”:”resize”,a=function(){var n=t.clientWidth||320;n>720&&(n=720);t.style

    2020/03/23
  • 程序员找女朋友的技术攻略入门知识_攻略基础入门

    需求篇 对于程序员来说,“单身”依然是人生最大的bug,关键是还无法调试。虽然俗话说“自古英雄多寂寞”,但是缺少另一半的人生总是不完整的。作为程序员,追女朋友一定要讲究策略。作者从需求分析到测试提供了一整套解决方案,现将其开源,希望各位程序员能找到自己心仪的女朋友。需求分析A、程序员为什么找不到女朋友当然要先问问自己为什么至今还单身,先从自己找找原因,这样

    2020/03/26
  • React Native项目使用react-apollo实现更新缓存的两种方式入门知识_native小白攻略

    背景:举个例子:在显示动态的页面中删除某一条动态之后退出该页,当再进入该页之后这个被删除的动态是否还显示?显示! 为啥? cache!cache是为了增强用户体验,如果每一次进入一个页面都需要从网络获取数据,当数据量很大时却迟迟加载不出来,麻爪了吧…..但是现在cache的存在却给我们造成了很大的困扰:我虽然删除了这条动态,并配合使用react-nati

    2020/03/31
  • Nodejs模块fs文件系统操作入门基础_文件基础入门

    node 的fs文档密密麻麻的 api 非常多,毕竟全面支持对文件系统的操作。文档组织的很好,操作基本分为文件操作、目录操作、文件信息、流这个大方面,编程方式也支持同步、异步和 Promise。本文记录了几个文档中没详细描写的问题,可以更好地串联fs文档思路:文件描述符同步、异步与 Promise目录与目录项文件信息stream文件描述符文件描述符是一个非负

    2020/03/20
  • bootlint.js使用指南_Bootstrap项目的HTML linter

    bootlint.js使用指南 GitHub:https://github.com/twbs/bootlint 简介描述:Bootstrap项目的HTML linter Bootl…

    2020/03/06
  • nginx负载均衡配置小白攻略_负载均衡小白教程

    本章给大家带来nginx负载均衡的相关配置讲解,首先大家先看下面的示意图:如上图所示;当客户端发起http请求时,先经过nginx服务器处理并重新分发请求;并下发给不同的服务器,从而实现nginx的负载均衡的简单应用。nginx配置 upstream www.xyqmw.com {server 111.231.197.74:8080 weight=

    2020/03/24
  • happypack基础知识_提升 webpack 的构建速度

    happypack基础知识 GitHub:https://github.com/amireh/happypack 简介描述:提升 webpack 的构建速度 由于有大量文件需要解析…

    2020/03/06
  • 基于jquery 横向/纵向 时间轴插件推荐基础入门_布局小白攻略

    这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐。1、jquery.jqtimeline插件:jquery.jqtimeline是一个简单、轻量级、优雅的用于记录重大事件的时间轴插件。这个插件可用于创建社交应用、博客时间轴、公司事务时间表等 。jqtimeline插件的数据是json 格式,可以很方便地于其他 jQuery 插件集成,

    2020/04/05
  • Choreographer-js基础知识教程_一个用于处理复杂动画的CSS 动效库

    Choreographer-js基础知识教程 官方网址:https://christinecha.github.io/choreographer-js/ GitHub:https:…

    2020/03/06
  • mocha基础入门教程_现在最流行的JavaScript测试框架之一,在浏览器和Node环境都可以使用

    mocha基础入门 官方网址:http://mochajs.org/ GitHub:https://github.com/mochajs/mocha 简介描述:现在最流行的Java…

    2020/03/05
  • worker-dom菜鸟知识_实现运行在一个Web Worker中的 DOM API 和框架

    worker-dom菜鸟知识 GitHub:https://github.com/ampproject/worker-dom 简介描述:实现运行在一个Web Worker中的 DO…

    2020/03/07
  • JavaScript中的执行上下文和堆栈是什么?小白教程_堆栈使用帮助

    在这篇文章中,我将深入研究JavaScript最基本的部分之一,即执行上下文。在这篇文章的最后,您应该更清楚地了解解释器要做什么,为什么在声明一些函数/变量之前可以使用它们,以及它们的值是如何确定的。什么是执行上下文?当代码在JavaScript中运行时,执行它的环境是非常重要的,并被评估为以下之一:1:全局代码——第一次执行代码的默认环境。2:函数代码——

    2020/03/30
  • Js中try/catch/finally 语句小白入门_错误基础入门

    try/catch/finally 语句用于处理代码中可能出现的错误信息。错误可能是语法错误,通常是程序员造成的编码错误或错别字。也 可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。try语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。finally 语句在 try 和 catc

    2020/03/22
  • 探索区块链的原理入门基础_区块链使用帮助

    之前经常听别人说,挖矿、比特币、区块链之类的东西,听起来好高大上呀,后来在网上了解相关知识,但是网上大部分都是转载,没一个能讲明白的,后来不知不觉接触到了一些易懂的点,所以今天整合一下,让大家彻彻底底的明白到底什么是区块链、什么是挖矿、什么是比特币。从头到尾都是小鹿三个小时的手动敲打,因为最近准备面试,写作的时间越来越少,但是我还是喜欢抽时间分享出来给各位读

    2020/03/30
  • bootstrap-datepicker小白帮助一款Bootstrap日期选择器插件

    bootstrap-datepicker使用攻略 官方网址:https://cdnjs.com/libraries/bootstrap-datepicker GitHub:http…

    2020/03/06