天外飞雨道沧桑
天外飞雨道沧桑

JS防抖与节流

CSDN话题挑战赛第2期
参赛话题：前端技术分享

说在前面

每年的下半年也是一个求职高峰期，JS中的防抖和节流是前端开发必备知识点，也是一种前端性能优化手段。在求职过程中，也会经常被面试官问到，所以防抖、节流对于前端开发来时，必须要掌握。

引言

弄懂这篇文章，你就能搞懂什么是防抖和节流，如何手写实现，以及防抖节流在项目中的应用场景。

什么是防抖和节流？

防抖与节流都是为了防止高频率触发某个动作，导致响应跟不上动作，造成页面卡顿，如：连续点击多次表单提交按钮造成多次重复提交处理、监听页面滚动处理、鼠标移动、窗口大小改变、输入框输入事件……
防抖和节流属于一种性能优化手段，可以通过控制函数执行时机来解决。
下面分别来介绍防抖和节流，以及手写实现。

防抖

将触发的多次事件合并成一个事件，只执行最后一次事件，具体实现：通过设置一个延迟执行时间，事件会在延迟时间后执行，延迟时间的期间内如果有事件触发，会重新计时。

function debounce ( fn , delay ) {
	let timer = null
	return function run ( ) {
		if ( timer ) {
			clearTimeout( timer )
		}
		timer = setTimeout( () => {
			fn()
		} , delay )
	}
}

防抖也可借用第三方 js 库实现，如 lodash.js 中的 _.debounce()

节流

控制频繁触发某个事件响应的频率，使高频触发变成每隔一段时间触发一次，这个时间之内触发的事件会被忽略，不去执行。具体实现：结合锁机制，控制当前执行只允许一个事件操作，操作完后才会解锁当前执行体，释放给其它事件。

function throttle ( fn , delay ) {
	let lock = false // 未上锁
	return function run ( ) {
		if ( !lock ) {
			// 未上锁可执行
			lock = true  // 进入执行时，对当前执行体上锁，禁止其它事件执行
			const timer = setTimeout( () => {
				fn()
				lock = false  // 当前触发事件执行完后，解锁释放执行体。
			} , delay)
		}
	}
}

节流也可借用第三方 js 库实现，如 lodash.js 中的 _.throttle()

案例

下面写了一个防抖和节流的应用场景，可以自行拷贝代码，打开页面查看效果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <label>搜索框：</label><input id="name" type="search" oninput="search()">
    <button onclick="confirm()">提交</button>
    <script>
      /**
       * @function:防抖
       * @description:将高频率多次触发事件合并成一个事件
       * @param {Function} fn:事件触发要做的处理函数
       * @param {Object} delay:自定义延迟执行时间
       * @return {Function} run:事件触发要执行的回调函数
       * @author yehuixiang
       */
      function debounce(fn, delay) {
        let timer = null
        return function run() {
          timer && clearTimeout(timer)
          timer = setTimeout(() => {
            fn()
          }, delay)
        }
      }
      /**
       * @function:提交
       * @description:提交表单内容，传给后台
       * @return void
       * @author yehuixiang
       */
      function submit() {
        const input = document.querySelector('#name')
        console.log(input)
        alert(`已提交：${input.value}`)
      }
      var confirm = debounce(submit, 500)

      /**
       * @function:节流
       * @description:将高频率多次触发事件变成每隔一段时间执行一次，也就是有节制地触发
       * @param {Function} fn:事件触发要做的处理函数
       * @param {Object} delay:自定义执行间隔
       * @param {Number} oldTime:旧时间指针
       * @param {Number} nowTime:当前时间指针
       * @return {Function} run:事件触发要执行的回调函数
       * @author yehuixiang
       * @version 时间戳版本
       */
      function throttle(fn, delay) {
        let oldTime = 0
        return function run() {
          const nowTime = +new Date()
          if (nowTime - oldTime > delay) {
            oldTime = nowTime
            const timer = setTimeout(() => {
              fn()
              clearTimeout(timer)
            }, delay)
          }
        }
      }
      /**
       * @function:实时搜索
       * @description:将输入值传给接口实时查询当前搜索词相关内容
       * @return void
       * @author yehuixiang
       */
      function getKeys() {
        // 调取后台关键词搜索接口，获取搜索结果相关处理
        console.log('从后台实时获取相关搜索词！')
      }
      var search = throttle(getKeys, 500)
    </script>
  </body>
</html>

表单提交按钮未使用防抖效果（注意：这里将 alert 改成了控制台打印，因为 alert 是同步的，没法看效果）：
JS防抖与节流_第1张图片
表单提交按钮使用防抖效果：

搜索框未使用节流效果（可以看到每次输入一个值都触发搜索，输入多少个值就执行了多少次搜索，若调取接口，则会导致页面卡顿，影响性能）：

搜索框使用节流效果（可以看到连续输入，会每隔一段时间执行一次搜索）：

总结

手写防抖和节流的核心还是闭包和定时器的使用。
防抖就是将多次事件合并成一个事件，只执行最后一次。
节流就是控制高频率触发事件时执行的频率，每隔一段时间执行一次，时间之内触发，忽略不去执行。

你可能感兴趣的:(js相关知识点,javascript,前端,开发语言)

  • 从零入门 HTML 开发：构建网页世界的基石指南 incidite html前端
    从零入门HTML开发：构建网页世界的基石指南在互联网蓬勃发展的今天，我们每天浏览的网页、使用的App界面，背后都离不开HTML这一基础技术的支撑。作为前端开发的入门语言，HTML（超文本标记语言）就像建筑中的砖石，是构建网页骨架的核心。无论你是想成为专业的前端工程师，还是单纯想了解网页背后的运作原理，掌握HTML基础都是迈出的第一步。认识HTML：网页的“骨架”语言HTML的全称为HyperTex
  • Taro 网络 API 详解与实用案例
    Taro网络API详解与实用案例在现代前端开发中，网络通信是不可或缺的一环。Taro作为一款多端开发框架，提供了丰富且统一的网络API，帮助开发者在小程序、H5、ReactNative等多端环境下高效地进行数据交互。本文将详细介绍Taro的四大网络API：Taro.request、Taro.uploadFile、Taro.downloadFile和Taro.connectSocket，并结合实际案
  • Redis面试精讲 Day 4：Redis事务与原子性保证 在未来等你 Redis面试专栏Redis面试数据库缓存
    【Redis面试精讲Day4】Redis事务与原子性保证开篇欢迎来到"Redis面试精讲"系列的第4天！今天我们将深入探讨Redis的事务机制与原子性保证，这是Redis面试中出现频率极高的核心知识点。掌握Redis事务不仅能帮助你在面试中脱颖而出，更能让你在实际开发中合理利用事务特性构建可靠的分布式系统。在面试中，面试官通常会通过以下方式考察候选人对Redis事务的理解：解释Redis事务的基本
  • 3月6日 337fa10ab9a3
    1.记单词20+30×还在努力中争取睡前完成，实在不行就明天补上2.练习演讲√早上起来的时候有点儿懵，不知道要去早起干啥，又不想像昨天早上一样去食堂读书(主要是因为食堂光线太暗了，看着不太舒服)但是还是起来了，然后在走去教室的路上看到了其他很多起的更早的同学已经在看书背知识点了，突然一下子就好像明白了，他们可能不仅更优秀，还比我更努力，然后我就找了一间空教室又打卡了一遍演讲第一课的视频，读了一下英
  • Vite：下一代前端构建工具的革命 布兰妮甜 vitejavascript前端构建工具
    Hi，我是布兰妮甜！在现代前端开发领域，构建工具的选择对开发体验和项目效率有着决定性影响。从早期的Grunt、Gulp到Webpack、Rollup，前端构建工具不断演进。而Vite的出现，则彻底改变了传统构建工具的工作模式，为开发者带来了前所未有的开发体验。本文将深入探讨Vite的设计哲学、核心特性、工作原理以及实际应用场景。文章目录一、什么是Vite？二、Vite的核心设计理念2.1利用浏览器
  • MEMS定向短节的作用如何在HDD中体现？ ericco123 MEMS陀螺仪惯性技术制造科技
    ER-MNS-09作为一款基于MEMS陀螺技术的定向短节，其异形圆柱体设计（直径30mm，长度120mm）使其能适配探管等钻探设备前端的有限空间。其核心在于采用可自寻北的高精度MEMS陀螺仪，摆脱了对地磁场的依赖。这一特性对于HDD至关重要，因其常在埋地管线、强电磁干扰或金属结构密集区域施工，传统磁传感器易受干扰失效，而ER-MNS-09能在此类复杂地下环境中提供稳定、可靠的方位基准。在HDD管道
  • 妈妈教的数学 蛋卷426
    学习心得听见数学我就头疼，可是听完课立马对数学有了兴趣，哈，神奇？人天生是爱学习的，天生具有好奇心？对于孩子，做好数学启萌很重要，用正确的方法让孩子爱上学习，同时不要害怕孩子出错，犯错是教育孩子最好的机会，我们要发现孩子出现问题的根本原因，是不是看不懂题目？语言理解的不对？还是这个知识点不懂，没学会？听完能拿来就用的方法，扳指头学习乘法表，今天就找来学习，教给孩子……又油然而生一种与孩子共成长的感
  • 前端基础知识Vue系列 - 17（vue中key的原理）
    一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key...用+newDate()生成的时间戳作为key，手动强制触发重新渲染那么这背后的逻辑是什么，key的作用又是什么？一句话来讲key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点场景背后的逻辑当我们在使用v-for时，需要给单元加上
  • 【Java代码审计 | 第五篇】XSS漏洞成因+实战案例 秋说 Java代码审计javaxss
    未经许可，不得转载。文章目录XSS漏洞成因1、直接输出用户输入2、在JSP中使用EL表达式输出用户输入3、在Thymeleaf模板中输出用户输入4、在JavaScript中嵌入用户输入实战案例案例1案例2案例3XSSXSS（跨站脚本攻击，Cross-SiteScripting）是一种常见的Web安全漏洞，攻击者通过在网页中注入恶意脚本，使得这些脚本在用户的浏览器中执行。XSS攻击通常分为以下三种类
  • 【三 Coze营销案例】【3.1 Coze商业实战案例——销售话术脚本全解析】 再见孙悟空_ Coze扣子智能体销售智能体营销智能体智能体开发人工智能
    一、引言在当今竞争激烈的商业环境中，销售团队面临着巨大的挑战。如何快速、精准地与客户沟通，提供有价值的解决方案，并最终促成交易，成为了销售成功的关键。Coze作为一款强大的智能工作流平台，为销售话术脚本的构建和优化提供了高效的解决方案。本文将深入探讨如何利用Coze打造销售话术脚本，通过实际案例分析展示其强大功能，并分享核心代码片段和知识点。二、Coze简介Coze是一个低代码的智能工作流平台，它
  • Vue.js 全面解析：构建现代前端应用的渐进式框架 斯~内克 vue知识点前端vue.js
    一、Vue.js的核心价值与演进1.1前端框架的变革与Vue的定位根据2024年StateofJS调查报告，Vue.js以82%的开发者满意度稳居前端框架前三甲。其核心优势体现在：渐进式架构：可从轻量级视图层扩展至全栈解决方案响应式系统：基于Proxy的精准依赖追踪（Vue3）组合式API：代码复用率提升60%以上生态系统：覆盖SSR、状态管理、移动端等20+场景1.2版本演进里程碑版本发布时间里
  • Selenium 知识点详解：从基础操作到代码实战 壮志凌云不假 seleniumpython测试工具
    在自动化测试领域，Selenium是一款备受瞩目的工具。一、Selenium简介Selenium是一个用于Web应用程序测试的工具，它支持多种浏览器和编程语言，能模拟用户在浏览器上的各种操作，如点击、输入文本等，从而实现对Web应用的自动化测试，帮助开发者快速发现潜在问题，提高开发效率。二、环境配置要使用Selenium，需先进行环境配置。以Python为例，首先需安装Selenium库，可通过p
  • 微信推客系统小程序开发上线全攻略：从源码部署到社交裂变运营 v_qutudy 推客系统开发推客小程序
    一、前言：为什么选择微信推客系统？在社交电商的浪潮中，微信推客系统凭借"自用省钱、分享赚钱"的裂变模式，成为商家低成本获客的利器。本文将深度解析如何从零开发一套支持独立部署的推客小程序，涵盖技术架构、源码解析、部署实战及运营策略，助力开发者快速搭建高转化率的社交电商系统。二、技术架构设计：打造稳定可扩展的推客系统1.整体架构分层前后端分离架构前端：采用Taro跨端框架开发微信小程序端，适配多端展示
  • 新一代会员分销返利小程序，聚合cps系统独立部署，对接20多个CPA/CPS资源 +V：ywxs5787 小程序开发cps分销软件开发小程序uniapp微信小程序
    技术栈前端：vue3+uniapp后端：PHP数据库：MySQL一、系统介绍PHP部分代码'value1','param2'=>'value2',//添加其他参数];//发送HTTPPOST请求$ch=curl_init();curl_setopt($ch,CURLOPT_URL,$url);curl_setopt($ch,CURLOPT_POST,true);curl_setopt($ch,CU
  • 黔东南最全8家司法亲子鉴定中心大全（附2024年汇总鉴定） 国医基因吴主任
    黔东南可以做司法亲子鉴定咨询的机构：黔东南国医基因，中心机构地址：黔东南州凯里市韶山南路31号。黔东南一般医院是不可以做司法亲子鉴定的，很多人在做司法亲子鉴定时第一时间内想到的一般都是去本地的各大医院做，然而事实却不是这样的，一般的医院都是做不了司法亲子鉴定的，亲子鉴定的具体实验还是要委托给专业的第三方亲子鉴定机构。一起跟随黔东南国医基因亲子鉴定中心来了解一下亲子鉴定的一些相关知识点。国医基因DN
  • 2024最新外卖CPS分销微信小程序源码【前端+后台+数据库+分销功能】 云深不知处㊣ 源码专区微信小程序小程序外卖CPS分销微信小程序源码CPS分销微信小程序源码
    内容目录一、详细介绍二、效果展示三、源代码下载地址一、详细介绍外卖侠CPS全套源码是一款为外卖平台提供分销功能的微信小程序。用户可以通过你的链接去领取外卖红包，然后去下单点外卖，既能省钱，又能获得佣金。该小程序带有商城、影票、吃喝玩乐等多个模块，适合不同用户的需求。外卖CPS的势头猛得一塌糊涂，被称为23年最大的红利之一，也被称为2023最佳小白可实操项目。外卖公司的广告预算持续增加，因为比传统广
  • CSS利用@font-face使用自定义字符和图标 小前端2018
    昨天发的一个教程被一顿喷，说已经不用图片了，什么图标字体啦，好桑心~~，但也是事实，现在的前端图片越来越少了，相应替换的是css以及图标字体，所以去探测了几个网站，找了一下style.css文件，看看具体的CSS内容，然后发现这是一个很有趣的问题。
  • 开发一个 vscode 图片悬停预览插件 weixin_40203158
    在前端项目中，往往会使用到图片，可能是直接放在项目中，也可能是使用cdn地址，但它们都需要点击才能查看到图片具体是什么内容，显得繁琐，能否和代码提示一样直接鼠标悬停时就展示呢？目前使用量最多的是ImagePreview这款插件，但我自己在使用时发现并没有在悬停时看到图片，自然想着自己实现一个。简单三步即可实现代码完成后发现异常地简单，指定某个语言增加额外hover内容获取鼠标悬停时当前行是否有图片
  • 2023-04-07 爱学习的阿布
    备考中医助理医师，时间规划和必备干货！备考中医助理医师这些干货内容你一定要知道，第一次考中医执业助理医师的可能对被考科目的重难点知识点还不是太了解，尤其是自学的同学可能会摸不着重点，今天我就来跟大家细说一下备考中医助理医师的那些干货内容我将分别从以下方面给大家介绍1.考试时间安排2.备考阶段技巧和方法3.备考中医助理医师重要知识点干货内容一.考试时间安排2月1-2月15进行网上报名2月20-3月5
  • webkitSpeechRecognitionHTML5语音识别文字（直接运行） AIGC创想家 html5语音识别前端
    前端想要实现语音转文字，其实不需要任何云服务，浏览器自带的api就能搞定。下面是已经封装好的代码，复制之后可以在控制台只接运行。classSpeechRecognitionManager{??tempTranscript=''??isRecording=false;??timeoutid=0;??exitKeywors=['stop','exit','quit','退出','停止识别','说完了'
  • 【前端必备】VSCode实用图片预览插件 Guang_how927 前端vscode编辑器前端插件图像处理
    ImagepreviewImagePreview插件功能概述ImagePreview插件通常用于在网页或应用程序中提供图片的预览功能，允许用户快速查看缩略图或放大后的图像，而无需打开单独的页面或下载文件。核心功能缩略图生成自动将上传的大尺寸图片转换为缩略图，便于在列表或画廊中展示。支持自定义缩略图尺寸和质量。鼠标悬停预览当用户将鼠标悬停在缩略图上时，显示放大版的图像。通常支持调整预览窗口的位置和大
  • 可复制的沟通力1 晨晨果
    一、学有所获好吧！我必须承认这是我第二次听这个课程。第一次听的时候虽然是一边做家务，一边听的，感觉很震撼，三观有被震到，尤其是【富足心态和匮乏心态】、【荣格“当潜意识没有进入到你的意识，就是命运”】这两点记忆犹新。现在听虽没初次听时那么惊喜、那么有震撼力，但看大家的作业和点评缺却精彩纷呈。尤其是关于【选择】这个话题，既是当初遗漏的重要知识点，也让自己感同身受。为什么与同事沟通达不了共识?为什么与最
  • 前端面试题 xkxnq 前端开发问题前端
    CSS常见问题解答1.CSS盒模型CSS盒模型由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成，分为两种类型：标准盒模型：元素宽度=content宽度替代盒模型（通过box-sizing:border-box设置）：元素宽度=content+padding+border2.CSS选择器的优先级优先级从高到低：!important（覆盖所有规则
  • Java知识体系个人总结 普通人zzz~ Java知识体系个人总结分布式微服务全家桶java
    Java知识体系个人总结Java进阶知识项目问题记录系统设计并发编程前端数据库关系型数据库非关系型数据库应用框架SpringMyBatis/IBatisNetty微服务与分布式1.分布式微服务2.Netflix-Ribbon3.Netflix-OpenFeign4.Netflix-Eureka5.Alibaba-Dubbo6.Alibaba-Nacos7.Alibaba-Sentinel8.Ali
  • 关于Ajax的学习笔记 秋也凉 ajax学习笔记
    Ajax概念：是一门使用了js语言，可以使用于Javaweb，实现前端代码和后端代码连结的的一种异步同步（不需要等待服务器相应，就能够发送第二次请求）的一种技术，它主要用于网页内容的局部刷新，列如验证码、导航栏的刷新等。实现步骤1.导入jQuery（一种框架，Ajax是JQuery的一种方法）文件——例如：写在jsp页面的标签里面。2.在jsp页面写一个函数，然后在函数里面调用ajax方法，aja
  • python学习打卡：DAY 18 推断聚类后簇的类型 西西西仓鼠 python训练营python学习聚类
    @浙大疏锦行聚类后的分析：推断簇的类型知识点回顾：推断簇含义的2个思路：先选特征和后选特征通过可视化图形借助ai定义簇的含义科研逻辑闭环:通过精度判断特征工程价值作业：参考示例代码对心脏病数据集采取类似操作，并且评估特征工程后模型效果有无提升。在聚类分析中，推断簇的类型是理解数据内在结构和业务意义的关键步骤。以下是系统化的推断方法及常见簇类型的总结：一、簇的基本类型明显分离的簇特征：不同簇中任意两
  • Python爬虫实战：深入无限滚动页面抓取原理与Playwright实现 Python爬虫项目 python爬虫开发语言区块链json
    一、前言：无限滚动页面的挑战在现代Web开发中，「无限滚动（InfiniteScrolling）」早已取代了传统的分页模式。以微博热搜流、知乎首页、抖音推荐页为例，用户向下滚动时会自动加载更多内容，这种体验虽提升了交互性，却让传统爬虫面临巨大挑战：页面初始只加载一部分内容剩余内容由JavaScript在滚动事件中动态加载requests类爬虫无法感知页面行为为什么传统爬虫抓不到数据？因为页面数据不
  • xLua热更新解决方案知识点汇总 窗外听轩雨 Lua热更新luaunityunity3d
    XLua热更新解决方案知识点汇总文章目录XLua热更新解决方案知识点汇总前言热更新的本质C#CallLua相关知识点Lua解析器：LuaEnvC#获取Lua的基础类型C#获取Lua的全局函数functionC#获取Lua的表TableLuaCallC#相关知识点程序主入口Lua调用C#的类Lua调用C#枚举Lua调用C#的数组Lua调用C#的ListLua调用C#的DictionaryLua调用C
  • XLua个人学习——C#访问Lua 一枚骰子 学习lua开发语言xLua
    目录0.引言1.访问基本数据类型全局变量2.访问全局的table2.1.映射到class或struct2.2.映射到一个interface2.3.映射到List、Dictionary2.4.映射到LuaTable类3.访问全局函数3.1映射到delegate3.2映射到LuaFunction4.官方使用建议0.引言本文是个人学习xLua中C#访问Lua的一些知识点总结。参考教程的是官方教程:xLu
  • 费曼学习法—有效输出的方法之一 Sandy时间管理导师
    一个知识点如何是真的学到了，并且能掌握的很牢靠，最能给学以致用的方法就是用输出倒逼输入才能做到真正的学以致用。那么如何有效的输出呢？费曼学习法，这个方法简单来说就是通过自己的语言，用最简单的话把一件事情讲清楚，外行人也能听的懂，它看似是我们用直白浅显的语言，把复杂深奥的知识传输给了别人，这个方法之所以能成为世界公认最好的学习法，是因为真的有很多人因为这个方法实现了逆袭，而且真正受益的却是我们自己。
  • 异常的核心类Throwable 无量 java源码异常处理exception
    java异常的核心是Throwable，其他的如Error和Exception都是继承的这个类 里面有个核心参数是detailMessage，记录异常信息，getMessage核心方法，获取这个参数的值，我们可以自己定义自己的异常类，去继承这个Exception就可以了，方法基本上，用父类的构造方法就OK，所以这么看异常是不是很easy package com.natsu;
  • mongoDB 游标（cursor） 实现分页 迭代 开窍的石头 mongodb
    上篇中我们讲了mongoDB 中的查询函数，现在我们讲mongo中如何做分页查询      如何声明一个游标        var mycursor = db.user.find({_id:{$lte:5}});       迭代显示游标数
  • MySQL数据库INNODB 表损坏修复处理过程 0624chenhong tomcatmysql
    最近mysql数据库经常死掉，用命令net stop mysql命令也无法停掉，关闭Tomcat的时候，出现Waiting for N instance(s) to be deallocated 信息。查了下，大概就是程序没有对数据库连接释放，导致Connection泄露了。因为用的是开元集成的平台，内部程序也不可能一下子给改掉的，就验证一下咯。启动Tomcat,用户登录系统，用netstat -
  • 剖析如何与设计人员沟通 不懂事的小屁孩 工作
    最近做图烦死了，不停的改图，改图……。烦，倒不是因为改，而是反反复复的改，人都会死。很多需求人员不知该如何与设计人员沟通，不明白如何使设计人员知道他所要的效果，结果只能是沟通变成了扯淡，改图变成了应付。 那应该如何与设计人员沟通呢？ 我认为设计人员与需求人员先天就存在语言障碍。对一个合格的设计人员来说，整天玩的都是点、线、面、配色，哪种构图看起来协调；哪种配色看起来合理心里跟明镜似的，
  • qq空间刷评论工具 换个号韩国红果果 JavaScript
    var a=document.getElementsByClassName('textinput'); var b=[]; for(var m=0;m<a.length;m++){ if(a[m].getAttribute('placeholder')!=null) b.push(a[m]) } var l
  • S2SH整合之session 灵静志远 springAOPstrutssession
    错误信息： Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cartService': Scope 'session' is not active for the current thread; consider defining a scoped
  • xmp标签 a-john 标签
    今天在处理数据的显示上遇到一个问题： var html = '<li><div class="pl-nr"><span class="user-name">' + user + '</span>' + text + '</div></li>'; ulComme
  • Ajax的常用技巧（2）---实现Web页面中的级联菜单 aijuans Ajax
    在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。 在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐
  • 天-安-门，好高 atongyeye 情感
        我是85后，北漂一族，之前房租1100，因为租房合同到期，再续，房租就要涨150。最近网上新闻，地铁也要涨价。算了一下，涨价之后，每次坐地铁由原来2块变成6块。仅坐地铁费用，一个月就要涨200。内心苦痛。     晚上躺在床上一个人想了很久，很久。        我生在农
  • android 动画 百合不是茶 android透明度平移缩放旋转
    android的动画有两种  tween动画和Frame动画   tween动画;,透明度,缩放,旋转,平移效果   Animation   动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 Animation
  • 查看本机网络信息的cmd脚本 bijian1013 cmd
    @echo 您的用户名是：%USERDOMAIN%\%username%>"%userprofile%\网络参数.txt" @echo 您的机器名是：%COMPUTERNAME%>>"%userprofile%\网络参数.txt" @echo ___________________>>"%userprofile%\
  • plsql 清除登录过的用户 征客丶 plsql
    tools---preferences----logon history---history  把你想要删除的删除 -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一起进步。 email ： binary_spac
  • 【Pig一】Pig入门 bit1129 pig
    Pig安装 1.下载pig   wget http://mirror.bit.edu.cn/apache/pig/pig-0.14.0/pig-0.14.0.tar.gz   2. 解压配置环境变量      如果Pig使用Map/Reduce模式，那么需要在环境变量中，配置HADOOP_HOME环境变量   expor
  • Java 线程同步几种方式 BlueSkator volatilesynchronizedThredLocalReenTranLockConcurrent
    为何要使用同步？      java允许多线程并发控制，当多个线程同时操作一个可共享的资源变量时（如数据的增删改查），      将会导致数据不准确，相互之间产生冲突，因此加入同步锁以避免在该线程没有完成操作之前，被其他线程的调用，      从而保证了该变量的唯一性和准确性。 1.同步方法&
  • StringUtils判断字符串是否为空的方法（转帖） BreakingBad nullStringUtils“”
    转帖地址：http://www.cnblogs.com/shangxiaofei/p/4313111.html   public static boolean isEmpty(String str)   　　判断某字符串是否为空，为空的标准是 str== null  或 str.length()== 0  
  • 编程之美-分层遍历二叉树 bylijinnan java数据结构算法编程之美
    import java.util.ArrayList; import java.util.LinkedList; import java.util.List; public class LevelTraverseBinaryTree { /** * 编程之美 分层遍历二叉树 * 之前已经用队列实现过二叉树的层次遍历，但这次要求输出换行，因此要
  • jquery取值和ajax提交复习记录 chengxuyuancsdn jquery取值ajax提交
    // 取值 // alert($("input[name='username']").val()); // alert($("input[name='password']").val()); // alert($("input[name='sex']:checked").val()); // alert($("
  • 推荐国产工作流引擎嵌入式公式语法解析器-IK Expression comsci java应用服务器工作Excel嵌入式
    这个开源软件包是国内的一位高手自行研制开发的，正如他所说的一样，我觉得它可以使一个工作流引擎上一个台阶。。。。。。欢迎大家使用，并提出意见和建议。。。 ----------转帖--------------------------------------------------- IK Expression是一个开源的（OpenSource），可扩展的（Extensible），基于java语言
  • 关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer daizj spring
    1、PropertyPlaceholderConfigurer Spring中PropertyPlaceholderConfigurer这个类，它是用来解析Java Properties属性文件值，并提供在spring配置期间替换使用属性值。接下来让我们逐渐的深入其配置。 基本的使用方法是：(1) <bean id="propertyConfigurerForWZ&q
  • 二叉树:二叉搜索树 dieslrae 二叉树
        所谓二叉树,就是一个节点最多只能有两个子节点,而二叉搜索树就是一个经典并简单的二叉树.规则是一个节点的左子节点一定比自己小,右子节点一定大于等于自己(当然也可以反过来).在树基本平衡的时候插入,搜索和删除速度都很快,时间复杂度为O(logN).但是,如果插入的是有序的数据,那效率就会变成O(N),在这个时候,树其实变成了一个链表. tree代码:
  • C语言字符串函数大全 dcj3sjt126com cfunction
    C语言字符串函数大全     函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例:   #include <stdio.h> #include <string.h>   int main
  • 友盟统计页面技巧 dcj3sjt126com 技巧
    在基类调用就可以了, 基类ViewController示例代码 -(void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [MobClick beginLogPageView:[NSString stringWithFormat:@"%@",self.class]];
  • window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 flyvszhb javajdk
    window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 本机已经安装了jdk1.7，而比较早期的项目需要依赖jdk1.6，于是同时在本机安装了jdk1.6和jdk1.7. 安装jdk1.6前，执行java -version得到 C:\Users\liuxiang2>java -version java version "1.7.0_21&quo
  • Java在创建子类对象的同时会不会创建父类对象 happyqing java创建子类对象父类对象
      1.在thingking in java 的第四版第六章中明确的说了，子类对象中封装了父类对象，   2."When you create an object of the derived class, it contains within it a subobject of the base class. This subobject is the sam
  • 跟我学spring3 目录贴及电子书下载 jinnianshilongnian spring
        一、《跟我学spring3》电子书下载地址： 《跟我学spring3》  （1-7 和 8-13） http://jinnianshilongnian.iteye.com/blog/pdf     跟我学spring3系列 word原版 下载     二、 源代码下载 最新依
  • 第12章 Ajax（上） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • BI and EIM 4.0 at a glance blueoxygen BO
    http://www.sap.com/corporate-en/press.epx?PressID=14787   有机会研究下EIM家族的两个新产品~~~~   New features of the 4.0 releases of BI and EIM solutions include: Real-time in-memory computing –
  • Java线程中yield与join方法的区别 tomcat_oracle java
    长期以来，多线程问题颇为受到面试官的青睐。虽然我个人认为我们当中很少有人能真正获得机会开发复杂的多线程应用(在过去的七年中，我得到了一个机会)，但是理解多线程对增加你的信心很有用。之前，我讨论了一个wait()和sleep()方法区别的问题，这一次，我将会讨论join()和yield()方法的区别。坦白的说，实际上我并没有用过其中任何一个方法，所以，如果你感觉有不恰当的地方，请提出讨论。 &nb
  • android Manifest.xml选项 阿尔萨斯 Manifest
    结构 继承关系 public final class Manifest extends Objectjava.lang.Objectandroid.Manifest 内部类 class Manifest.permission权限 class Manifest.permission_group权限组 构造函数 public Manifest () 详细 androi
  • Oracle实现类split函数的方 zhaoshijie oracle
    关键字：Oracle实现类split函数的方 项目里需要保存结构数据，批量传到后他进行保存，为了减小数据量，子集拼装的格式，使用存储过程进行保存。保存的过程中需要对数据解析。但是oracle没有Java中split类似的函数。从网上找了一个，也补全了一下。 CREATE OR REPLACE TYPE t_split_100 IS TABLE OF VARCHAR2(100); cr
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他