好名字0821
好名字0821

了解防抖和节流：提升前端交互体验的实用策略

了解防抖和节流：提升前端交互体验的实用策略

  • 前言
  • 什么是防抖？
  • 什么是节流？
  • 应用实例
    • 防抖实例
    • 节流实例

前言

本文将重点介绍前端性能优化方法之一的防抖和节流。首先解释了它们的概念和原理，然后探讨了它们在前端开发中的应用场景，如输入框搜索、滚动事件等。最后，通过简单的代码示例展示了如何实现防抖和节流函数。通过学习和应用这两种技术，我们可以有效地减少不必要的函数执行次数，提高页面响应速度，从而改善用户体验。

什么是防抖？

定义：延迟一段时间再触发，如果再延迟时间内又触发，则清除上一个定时，再开始新的定时。
应用场景：搜索框联想、屏幕伸缩。

什么是节流？

定义：在一段时间间隔内，稀释事件的触发频率，不论事件被触发几次，只执行一次。
应用场景：
单位时间内，鼠标不论点击多少次，只执行一次（搜索内容未变化时）。
在使用列表下拉滚动加载时，用于定时监听滚动事件。

应用实例

防抖实例

下面是用防抖实现一个简易版搜索框联想+防抖

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <header>
        <h1>防抖解决搜索联想词</h1>
    </header>

    <main>
            <input type="text" id="search-input" placeholder="Search...">
            <ul id="suggestions-list"></ul>
    </main>

    <script>
		// 1.防抖函数
		function debounce(func, delay) {
		  let timer;
		  return function (...args) {
		    clearTimeout(timer);
		    timer = setTimeout(() => {
		      func.apply(this, args);
		    }, delay);
		  };
		}
		// 2.定义两个变量分别存储输入框id和联想词id
		const searchInput = document.getElementById('search-input');
		const suggestionsList = document.getElementById('suggestions-list');
		
		// 3.模拟异步请求获取联想词
		function fetchSuggestions(keyword) {
		  const suggestions = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig'];
		
		  renderSuggestions(suggestions.filter(suggestion =>
		    suggestion.toLowerCase().startsWith(keyword.toLowerCase())
		  ));
		}
		// 4.联想词显示函数
		function renderSuggestions(suggestions) {
		  suggestionsList.innerHTML = '';
		
		  suggestions.forEach((suggestion) => {
		    const listItem = document.createElement('li');
		    listItem.textContent = suggestion;
		    suggestionsList.appendChild(listItem);
		  });
		}
		// 定义默认方法，调用闭包方法，设置定时时间和防抖结束后调用的函数
		const debounceFetchSuggestions = debounce(fetchSuggestions, 1000);
		// 给输入框id增加监听器
		searchInput.addEventListener('input', function () {
			// 获取去空格value值
		  const keyword = searchInput.value.trim();
		  // 调用闭包方法
		  debounceFetchSuggestions(keyword);
		});
	</script>
</body>
</html>

讲解代码
1.在html代码中写input、ul，一个用来输入，一个用来返回联想词，并给它们设置id值用于添加监听以及更新内容。
2.定义防抖函数：debounce
外层两个参数分别存储防抖事件处理方法以及延迟毫秒数。
timer用于存储定时器的引用。内部返回的闭包函数如果在延迟时间内再次被调用，则timer重置，且重新开始计时。
如果延迟时间内没有再次被调用，则调用func也就是fetchSuggestions函数，这里用到了一个方法apply，该方法有两个参数，第一个参数决定this指向的是哪个上下文环境，这里指向的是当前上下文环境，第二个为普通参数。
3.定义两个变量searchInput、suggestionsList分别把input和ul的id进行赋值。
4.模仿异步接口写方法，该方法第一层是定义了所有联想词，第二层是调用联想词显示函数。这里用到filter过滤和筛选，这里就不赘述了。
5.联想词显示函数，这里用到的是forEach遍历，createElement创建HTML元素，以及用li和appendchild加元素。
6.定义默认方法，并且设置事件处理方法和延迟毫秒数。
7.给输入框加监听器监听器中使用trim去除空格，且调用闭包函数。

节流实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <header>
        <h1>节流解决搜索联想词</h1>
    </header>

    <main>
		<input type="text" id="searchInput">
    </main>

    <script>
		const searchInput = document.getElementById('searchInput');
		
		function search(query) {
		  // 模拟搜索操作，这里可以替换为实际的搜索逻辑
		  console.log(`搜索: ${query}`);
		}
		
		// 使用节流函数处理搜索输入
		const throttleSearch = throttle(search, 1000); // 设定延迟为500毫秒
		
		searchInput.addEventListener('keyup', function(event) {
		  const query = event.target.value.trim();
		  throttleSearch(query);
		});
		
		// 节流函数实现
		function throttle(func, delay) {
		  let timerId;
		  let lastExecuted = 0;
		
		  return function(...args) {
		    const now = Date.now();
		    const timeSinceLastExecution = now - lastExecuted;
		
		    if (timeSinceLastExecution >= delay) {
		      func.apply(this, args);
		      lastExecuted = now;
		    } else {
		      clearTimeout(timerId);
		      timerId = setTimeout(() => {
		        func.apply(this, args);
		        lastExecuted = Date.now();
		      }, delay - timeSinceLastExecution);
		    }
		  };
		}

	</script>
</body>
</html>

我们首先获取了搜索框的元素，并定义了一个 search 函数用于模拟搜索操作。然后，我们使用节流函数 throttle 对搜索函数进行包装，设定了一个1000毫秒的延迟。
接下来，监听搜索框的 keyup 事件，并获取用户输入的查询词。每次键盘释放时，会调用节流函数 throttleSearch，并将查询词作为参数传递给搜索函数 search。
在节流函数的实现中，记录了最后一次函数执行的时间戳，并根据设定的延迟来判断是否立即执行函数或设置定时器延迟执行函数。
当用户在搜索框中输入内容时，搜索请求会在一定的时间间隔内被触发，避免了频繁的搜索请求。

你可能感兴趣的:(JavaScript,前端,交互)

  • 【ES6新特性】声明变量关键字：var、let、const详解 小钟H呀 ES6新特性学习手册es6javascript开发语言
    前言在ES6（ECMAScript2015）之前，JavaScript中只有var关键字用于变量声明。ES6新增了let和const，它们解决了var的一些设计缺陷，使得变量声明更安全、更符合编程直觉。核心特性对比1.作用域（Scope）var：函数作用域（在函数内部声明的变量，只能在函数内部访问）let/const：块级作用域（在{}代码块中声明的变量，只能在块内访问）//var示例functi
  • 神器 Turbo Console Log：让 `console.log` 操作一键搞定！ Judy1623 VSCode插件vscode插件
    在前端开发的日常里，尤其是使用VSCode调试JavaScript代码时，console.log堪称我们的“调试好帮手”。但每次都手动输入console.log语句，着实麻烦又浪费时间。今天就给大家安利一款超实用的VSCode插件——TurboConsoleLog，用了它，你会感叹为什么没有早点发现！安装和卸载步骤就不多说了，相信大家都轻车熟路。咱们直接进入重点——这款插件的快捷键使用方法。使用注
  • 模型上新！体验文心大模型4.5卓越性能，文心快码邀您探索 前端后端java人工智能程序员
    3月16日，文心大模型4.5和文心大模型X1正式发布！当天，文心快码BaiduComate也发布了文心大模型4.5支持的新版本，为用户带来更加强大的智能交互体验。即日起，用户可以在文心快码BaiduComate的【Chat】功能中，选择切换至ERNIE-4.5-8K-Preview，体验这一新一代原生多模态大模型的卓越性能。文心大模型4.5原生多模态基础大模型文心大模型4.5是百度自主研发的新一代
  • 基于.NET MVC实现H5页面调用手机摄像头扫描二维码完整方案 Bart_Lu .netmvc
    一、前言在移动端Web开发中，二维码扫描功能已成为常见需求。本文将介绍如何在ASP.NETMVC框架下，通过HTML5技术调用手机摄像头实现二维码扫描功能，并提供完整的代码实现方案。二、技术选型前端库：使用ZXing-js（支持浏览器二维码解析）后端框架：ASP.NETMVC5浏览器API：MediaDevicesAPI三、实现步骤1.准备工作在MVC项目中引入所需库：html运行HTML2.创建
  • 《AI大模型趣味实战》 No3：快速搭建一个漂亮的AI家庭网站-相册/时间线/日历/多用户/个性化配色/博客/聊天室/AI管家(下) 带娃的IT创业者 AI大模型趣味实战人工智能xcodemacos
    《AI大模型趣味实战》No3：快速搭建一个漂亮的AI家庭网站-相册/时间线/日历/多用户/个性化配色/博客/聊天室/AI管家(下)摘要本文介绍了家庭网站V1.3版本的更新内容，主要聚焦于AI管家功能的优化与完善。V1.3版本对AI管家模块进行了全面升级，包括使用更快速的GLM-4-Flash模型、优化语音交互体验、改进用户界面以及增强系统稳定性。本文详细解析了这些改进的技术实现，包括语音识别与合成
  • 前端框架革命：React与Vue对比与解析 WHCIS Web开发技术前端框架react.jsvue.js
    一、框架设计哲学的本质差异1.1React：以JavaScript为核心的函数式哲学React的核心思想可以概括为**“UI即函数”**，其设计遵循以下原则：React核心声明式编程组件即函数单向数据流JSX描述UI函数组件+Hook状态提升模式声明式编程：开发者只需描述界面应该呈现的最终状态，无需关心具体DOM操作细节不可变数据流：通过setState触发组件树更新，保持数据流向的可预测性虚拟D
  • Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析 旧味清欢| Vuevue.js架构前端
    Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析一、框架演变：从Vue2到Vue3的跨越1.1革命性升级Vue3的发布标志着前端框架进入新纪元，其核心改进体现在三个方面：性能飞跃：包体积减少41%，初始渲染提速55%，更新性能提升133%开发体验：CompositionAPI带来更好的逻辑复用能力未来兼容：完善的TypeScript支持与渐进式升级策略1.2兼容性设计通过@vue/co
  • 基于Spring Boot+vue技术的导游系统设计与实现 除了菜一无所有！ springbootvue.js后端
    论文下载【免费】基于SpringBoot+vue技术的导游系统设计与实现资源-CSDN文库摘要本研究背景主要聚焦于当前旅游业信息化、智能化的发展趋势。随着移动互联网的普及和人们出行方式的多样化，导游系统作为旅游服务的重要组成部分，亟需进行技术革新以提升用户体验和服务效率。本研究旨在利用SpringBoot后端框架与Vue前端框架，构建一个功能丰富、交互友好的导游系统。研究内容主要包括系统需求分析、
  • 前端面试：如何标准化处理线上用户反馈的问题？ returnShitBoy 前端面试javascript
    在前端开发中，标准化处理线上用户反馈的问题是确保持续改进产品质量和用户体验的重要步骤。以下是一个有效的标准化处理流程，结合实际工作经验，以便更好地收集、分析和解决用户反馈问题。1.建立反馈渠道首先，需要为用户提供明确的反馈渠道。可以通过以下方式实现：反馈按钮：在应用的每个页面或关键功能上添加反馈按钮，方便用户随时提交意见。支持邮箱：提供专门的支持邮箱，用户可以通过此邮箱发送详细的问题描述。在线聊天
  • 《前端监控与性能优化全景指南：构建企业级高性能应用》 前端极客探险家 前端性能优化sentryprometheusgrafana
    文章目录前言技术栈覆盖范围一、监控体系架构设计1.1全链路监控系统组成1.2核心监控指标清单二、性能数据采集实战2.1增强版性能采集器2.2用户行为轨迹录制三、深度性能优化策略3.1构建阶段优化（Webpack5示例）3.2运行时优化技巧四、错误监控与智能诊断4.1增强型错误边界4.2网络请求监控五、生产环境调优指南5.1Nginx极致配置5.2CDN策略优化六、自动化质量保障体系6.1CI/CD
  • Vue2与Vue3：深入比较与迁移指南 布兰妮甜 #Vuevue2vue3迁移指南
    文章目录前言一、响应式系统的进化二、组合式API的引入三、生命周期钩子的变化四、新特性与优化五、迁移指南六、实际案例结语前言Vue.js自从2014年首次发布以来，凭借其简洁的语法、灵活的组件化架构以及高效的性能，迅速成为了最受欢迎的前端框架之一。随着技术的不断进步，Vue.js也在不断地迭代和优化，Vue3就是在这样的背景下诞生的。Vue3不仅带来了许多新特性和性能优化，还在API设计和开发者体
  • php开发转go的学习计划及课程资料信息 老李要转行 phpgolang学习
    以下是为该课程体系整理的配套教材和教程资源清单，包含书籍、视频、官方文档和实战项目资源，帮助你系统化学习：Go语言学习教材推荐（PHP开发者适配版）一、核心教材（按学习阶段分类）1.基础语法阶段（阶段一）资源类型名称推荐理由链接/获取方式官方教程Go语言之旅交互式学习，快速上手基础语法官方免费中文书籍《Go语言入门指南》专为有其他语言经验的开发者编写京东/当当速查手册Go速查表PHP与Go语法对比
  • Java Web开发核心内容全解析（上） 风铃儿~ javaservletmybatis
    一、JavaWeb概述JavaWeb是指使用Java技术来解决相关web互联网领域的技术总和。在当今数字化时代，JavaWeb在构建企业级应用、电子商务平台、社交网络等方面发挥着至关重要的作用。（一）JavaWeb的体系结构JavaWeb应用的体系结构主要分为客户端层、表示层、业务逻辑层和数据访问层。1.客户端层-这是用户与Web应用交互的最前端。主要包括用户浏览器，它可以接收并显示从服务器端发送
  • 前端面试：ajax 和 xhr 是什么关系？ returnShitBoy 前端面试ajax
    在前端开发中，AJAX（AsynchronousJavaScriptandXML）和XHR（XMLHttpRequest）是两个密切相关但有些不同的概念。以下是对这两者的详细解释及其关系：1.AJAX定义：AJAX是一个用于创建异步web应用程序的技术。它允许网页在不完全重新加载整页的情况下，与服务器交换数据并更新部分网页内容。主要特征：异步操作：AJAX使得页面可以在后台与服务器进行数据交换，用
  • axios在前后端分离的仓储管理系统中的作用 PLJJ685 前后端分离的仓库管理系统前端vue.js
    在前后端分离的仓储管理系统中，axios是一个非常重要的工具，用于在前端（通常是Vue.js、React等框架）和后端（通常是SpringBoot、Node.js、Django等框架）之间进行HTTP通信。以下是axios在仓储管理系统中的作用和具体应用场景：1.前后端分离架构在前后端分离的架构中：前端：负责页面的渲染和用户交互。后端：负责数据处理、业务逻辑和数据库操作。通信方式：前后端通过HTT
  • 构建AngularJS动态Web应用的示例教程 你这人真狗
    本文还有配套的精品资源，点击获取简介：AngularJS是一个由Google支持的前端JavaScript框架，用于创建动态Web应用程序。本文将通过一个名为“angular-sample-app”的示例应用程序，详细介绍AngularJS的核心特性，包括双向数据绑定、控制器、指令系统、服务与依赖注入、表单处理、路由与导航、模板和局部存储以及其他高级特性。通过这个示例应用的深入剖析，开发者可以学习
  • DeepSeek重构产业生态：餐饮、金融与短视频的智能跃迁 放逐者-保持本心，方可放逐 其他重构金融
    引言：智能时代的产业共振在数字技术浪潮席卷全球的当下，DeepSeek作为人工智能领域的重要参与者，正以其强大的算法能力和多模态交互特性，深度渗透至餐饮、金融、短视频等民生关键领域。从长江之畔的烟火气到陆家嘴的金融脉搏，从市井小店的智能排班到跨国银行的风险定价，从美食博主的AI替身到探店经济的虚实融合，DeepSeek不仅重塑了传统行业的运营逻辑，更在消费升级与技术创新的交汇处，催生出新的商业范式
  • GraphQL 是一种现代化的 API 查询语言和运行时 getapi graphqlmicrosoft后端
    GraphQL是一种现代化的API查询语言和运行时，由Facebook开发并于2015年开源。它提供了一种更高效、灵活的方式来获取数据，解决了传统RESTfulAPI中的一些痛点（如过度获取或不足获取数据）。GraphQL在全栈开发中越来越受欢迎，特别是在需要复杂数据交互的应用中。以下是关于GraphQL的详细介绍以及如何在项目中使用它的指南。1.GraphQL的核心特点GraphQL的主要优势在
  • CSS语言的数论算法 宇瞳月 包罗万象golang开发语言后端
    CSS语言的数论算法引言数论作为数学的一个重要分支，主要研究整数及其性质。数论的基本问题包括素数的性质、最大公约数、最小公倍数、同余等，同时数论在密码学、计算机科学等领域具有广泛的应用。而CSS（层叠样式表）本身是一种样式表语言，用于控制HTML文档的样式和布局，虽然CSS本身并不能直接进行复杂的数论运算，但它可以和JavaScript等编程语言结合使用，实现数论算法的可视化与交互。本文将探讨数论
  • 轻量级模块化前端框架：快速构建强大的Web界面 小杰~ 前端框架前端
    轻量级模块化前端框架：快速构建强大的Web界面在当今快节奏的Web开发环境中，选择一个高效且灵活的前端框架至关重要。UIkit是一个轻量级的模块化前端框架，旨在帮助开发者快速构建功能强大且响应迅速的Web界面。UIkit提供了丰富的组件和工具，使开发者能够轻松实现现代化的设计效果。无论是构建复杂的用户界面还是简单的网页布局，UIkit都能提供出色的支持。其模块化设计使得开发者可以根据项目需求灵活选
  • 解决MybatisPlus updateById更新数据时将没传的数据也更新成了null 善我 后端java
    首先，MybatisPlus在调用自带的更新接口updateById时，如果没加任何配置，默认是不会将前端没传的数据也更新成null的。即MyBatisPlus不会更新传入实体中为null的字段，只会更新设置了不为null的值。如果发现没传的也更新成null了的话，可以看看问题是否出在以下几个方面。可能原因1、后端定义的字段类型是否为包装类型？比如应该定义成Integer，结果你定义的是int，那
  • GTP生成UI代码 酒江 ui人工智能深度学习
    使用GPT生成UI代码，通常是指利用GPT模型生成前端界面的代码，例如HTML、CSS、JavaScript等。GPT可以帮助开发人员快速创建界面元素的代码，减少手动编写的工作量。下面是一些关键步骤，详细说明如何用GPT生成UI代码：1.明确UI需求和设计界面元素：首先明确需要哪些UI元素。例如：按钮、输入框、表单、表格等。布局：确定页面的布局结构，例如：一栏布局、两栏布局、响应式设计等。交互功能
  • let const var 底层区域别，es6还有AO 对象和GO对象吗 新茶十九 #学习javascriptes6前端ecmascript
    在JavaScript中，var、let、const的底层行为差异与作用域规则和变量存储机制密切相关。ES6引入了块级作用域和词法环境（LexicalEnvironment），改变了原有的AO和GO的实现方式，但核心逻辑仍然保留。以下是详细解释：一、var、let、const`的底层区别特性varletconst作用域函数作用域或全局作用域块级作用域块级作用域变量提升提升并初始化为undefine
  • MyBatis SqlSession 是如何创建的？ 它与 SqlSessionFactory 有什么关系？ 冰糖心书房 Mybatis源码系列2025Java面试系列mybatis
    SqlSession是MyBatis中与数据库交互的核心接口，它提供了执行SQL语句、管理事务、获取Mapper接口代理对象等关键功能。SqlSession实例不是直接通过new关键字创建的，而是通过SqlSessionFactory工厂来创建的。SqlSessionFactory负责创建SqlSession实例，并管理SqlSession的生命周期。1.SqlSession的创建方式：通过Sql
  • 云贝餐饮独立连锁版v3源码 扫码点餐毕业设计参考好选择 可二开 DeepinThinks 源码分享课程设计php小程序
    云贝V3最新版，采用PHP语言和Laravel9框架，前端使用VUE3和小程序uniapp开发。️云贝V3特点：全开源：提供完整的源代码，无版权纠纷。免授权：无需支付额外授权费用。可二开：支持二次开发，满足个性化需求。技术支持：提供开发者技术支持，确保项目顺利进行。最新版本号：V1.7.9新增会员价显示会员价开关(设置-订单设置-商品设置)新增异地外卖下单开关(门店-业务设置-外送设置)新增套餐固
  • ES6-01-01day CodeDoge javascript开发语言ecmascript
    ECMAScript和javascript的关系是，前者是后者的规格，后者是前者的一种实现。ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。不存在变量提升var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。为了纠正这种现象，
  • 国密系列加密技术及其在爬虫逆向中的应用研究 ylfhpy 爬虫项目实战pythonjavascript逆向反爬爬虫
    一、引言在当今数字化飞速发展的时代，互联网已深入到社会生活的各个层面，数据的流通与交互变得极为频繁。与此同时，数据安全问题日益成为人们关注的焦点。加密技术作为保障数据安全的核心手段，其重要性不言而喻。国密系列加密算法是我国自主研发的一套具有高安全性、高性能特点的加密标准，它为我国金融、政务、医疗等关键领域的数据安全提供了坚实的保障。对于爬虫逆向分析而言，随着网站对数据保护意识的增强，越来越多的网站
  • 下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？ liangshanbo1215 前端性能css前端
    下载CSS文件会对页面的渲染过程产生影响，具体是否阻塞DOM树的构建和页面的显示，取决于浏览器的渲染机制。1.CSS文件下载是否会阻塞DOM树的构建？一般情况下，CSS文件下载不会阻塞DOM树的构建：DOM树的构建是由HTML解析器完成的，解析器会逐行解析HTML并构建DOM树。即使CSS文件正在下载，HTML解析器仍然会继续工作，构建DOM树。但如果JavaScript访问了样式，CSS文件下载
  • 《突破性能瓶颈，用 Rust + WASM 实现浏览器端FFT加速300%实战》 煜bart 人工智能机器人
    引言：当JavaScript遇上硬核计算**“为什么我的音频分析页面卡到崩溃？”这是前端工程师在实现实时频谱可视化时最常见的噩梦。传统JavaScript的FFT计算在万级数据点时就会引发严重卡顿，但今天我们将用**Rust+WebAssembly**的组合拳，在浏览器中实现**零依赖、300%加速的傅里叶变换**。无需WebGL黑魔法，直接上硬核代码！---###**一、血腥现场：JS的Type
  • rpc协议服务器是什么,RPC是什么？ weixin_39906245 rpc协议服务器是什么
    RPC是什么？REST和RPC都常用于微服务架构中。都是网络交互的协议规范。通常用于多个微服务之间的通信协议。RPC就是从一台机器(客户端)上通过参数传递的方式调用另一台机器(服务器)上的一个函数或方法(可以统称为服务)并得到返回的结果。什么是RPC远程方法调用，就是像调用本地方法一样调用远程方法。常见RPC框架结构图：RPC框架要做到的最基本的三件事：1、服务端如何确定客户端要调用的函数；在远程
  • LeetCode[位运算] - #137 Single Number II Cwind javaAlgorithmLeetCode题解位运算
    原题链接：#137 Single Number II  要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现三次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间   难度：中等   分析： 与#136类似，都是考察位运算。不过出现两次的可以使用异或运算的特性 n XOR n = 0, n XOR 0 = n，即某一
  • 《JavaScript语言精粹》笔记 aijuans JavaScript
    0、JavaScript的简单数据类型包括数字、字符创、布尔值（true/false）、null和undefined值，其它值都是对象。 1、JavaScript只有一个数字类型，它在内部被表示为64位的浮点数。没有分离出整数，所以1和1.0的值相同。 2、NaN是一个数值，表示一个不能产生正常结果的运算结果。NaN不等于任何值，包括它本身。可以用函数isNaN(number)检测NaN,但是
  • 你应该更新的Java知识之常用程序库 Kai_Ge java
    在很多人眼中，Java 已经是一门垂垂老矣的语言，但并不妨碍 Java 世界依然在前进。如果你曾离开 Java，云游于其它世界，或是每日只在遗留代码中挣扎，或许是时候抬起头，看看老 Java 中的新东西。 Guava Guava[gwɑ:və]，一句话，只要你做Java项目，就应该用Guava（Github）。 guava 是 Google 出品的一套 Java 核心库，在我看来，它甚至应该
  • HttpClient 120153216 httpclient
    /** * 可以传对象的请求转发，对象已流形式放入HTTP中 */ public static Object doPost(Map<String,Object> parmMap,String url) { Object object = null; HttpClient hc = new HttpClient(); String fullURL
  • Django model字段类型清单 2002wmj django
    Django 通过 models 实现数据库的创建、修改、删除等操作，本文为模型中一般常用的类型的清单，便于查询和使用： AutoField：一个自动递增的整型字段，添加记录时它会自动增长。你通常不需要直接使用这个字段；如果你不指定主键的话，系统会自动添加一个主键字段到你的model。(参阅自动主键字段) BooleanField：布尔字段,管理工具里会自动将其描述为checkbox。 Cha
  • 在SQLSERVER中查找消耗CPU最多的SQL 357029540 SQL Server
    返回消耗CPU数目最多的10条语句 SELECT TOP 10    total_worker_time/execution_count AS avg_cpu_cost, plan_handle,    execution_count,    (SELECT SUBSTRING(text, statement_start_of
  • Myeclipse项目无法部署，Undefined exploded archive location 7454103 eclipseMyEclipse
    做个备忘！ 错误信息为：       Undefined exploded archive location 原因：           在工程转移过程中，导致工程的配置文件出错； 解决方法：    
  • GMT时间格式转换 adminjun GMT时间转换
    普通的时间转换问题我这里就不再罗嗦了，我想大家应该都会那种低级的转换问题吧，现在我向大家总结一下如何转换GMT时间格式，这种格式的转换方法网上还不是很多，所以有必要总结一下，也算给有需要的朋友一个小小的帮助啦。 1、可以使用 SimpleDateFormat SimpleDateFormat    EEE-三位星期 d-天 MMM-月 yyyy-四位年
  • Oracle数据库新装连接串问题 aijuans oracle数据库
    割接新装了数据库，客户端登陆无问题，apache/cgi-bin程序有问题，sqlnet.log日志如下： Fatal NI connect error 12170.   VERSION INFORMATION:         TNS for Linux: Version 10.2.0.4.0 - Product
  • 回顾java数组复制 ayaoxinchao java数组
    在写这篇文章之前，也看了一些别人写的，基本上都是大同小异。文章是对java数组复制基础知识的回顾，算是作为学习笔记，供以后自己翻阅。首先，简单想一下这个问题：为什么要复制数组？我的个人理解：在我们在利用一个数组时，在每一次使用，我们都希望它的值是初始值。这时我们就要对数组进行复制，以达到原始数组值的安全性。java数组复制大致分为3种方式：①for循环方式 ②clone方式 ③arrayCopy方
  • java web会话监听并使用spring注入 bewithme Java Web
            在java web应用中，当你想在建立会话或移除会话时，让系统做某些事情，比如说，统计在线用户，每当有用户登录时，或退出时，那么可以用下面这个监听器来监听。        import java.util.ArrayList; import java.ut
  • NoSQL数据库之Redis数据库管理(Redis的常用命令及高级应用) bijian1013 redis数据库NoSQL
    一 .Redis常用命令         Redis提供了丰富的命令对数据库和各种数据库类型进行操作，这些命令可以在Linux终端使用。         a.键值相关命令         b.服务器相关命令 1.键值相关命令       &
  • java枚举序列化问题 bingyingao java枚举序列化
    对象在网络中传输离不开序列化和反序列化。而如果序列化的对象中有枚举值就要特别注意一些发布兼容问题: 1.加一个枚举值 新机器代码读分布式缓存中老对象，没有问题，不会抛异常。 老机器代码读分布式缓存中新对像，反序列化会中断，所以在所有机器发布完成之前要避免出现新对象，或者提前让老机器拥有新增枚举的jar。 2.删一个枚举值 新机器代码读分布式缓存中老对象，反序列
  • 【Spark七十八】Spark Kyro序列化 bit1129 spark
    当使用SparkContext的saveAsObjectFile方法将对象序列化到文件，以及通过objectFile方法将对象从文件反序列出来的时候，Spark默认使用Java的序列化以及反序列化机制，通常情况下，这种序列化机制是很低效的，Spark支持使用Kyro作为对象的序列化和反序列化机制，序列化的速度比java更快，但是使用Kyro时要注意，Kyro目前还是有些bug。 Spark
  • Hybridizing OO and Functional Design bookjovi erlanghaskell
      推荐博文： Tell Above, and Ask Below - Hybridizing OO and Functional Design 文章中把OO和FP讲的深入透彻，里面把smalltalk和haskell作为典型的两种编程范式代表语言，此点本人极为同意，smalltalk可以说是最能体现OO设计的面向对象语言，smalltalk的作者Alan kay也是OO的最早先驱，
  • Java-Collections Framework学习与总结-HashMap BrokenDreams Collections
            开发中常常会用到这样一种数据结构，根据一个关键字，找到所需的信息。这个过程有点像查字典，拿到一个key，去字典表中查找对应的value。Java1.0版本提供了这样的类java.util.Dictionary(抽象类)，基本上支持字典表的操作。后来引入了Map接口，更好的描述的这种数据结构。  &nb
  • 读《研磨设计模式》-代码笔记-职责链模式-Chain Of Responsibility bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 业务逻辑：项目经理只能处理500以下的费用申请，部门经理是1000，总经理不设限。简单起见，只同意“Tom”的申请 * bylijinnan */ abstract class Handler { /*
  • Android中启动外部程序 cherishLC android
    1、启动外部程序 引用自： http://blog.csdn.net/linxcool/article/details/7692374 //方法一 Intent intent=new Intent(); //包名 包名+类名（全路径） intent.setClassName("com.linxcool", "com.linxcool.PlaneActi
  • summary_keep_rate coollyj SUM
    BEGIN /*DECLARE minDate varchar(20) ; DECLARE maxDate varchar(20) ;*/ DECLARE stkDate varchar(20) ; DECLARE done int default -1; /* 游标中 注册服务器地址 */ DE
  • hadoop hdfs 添加数据目录出错 daizj hadoophdfs扩容
    由于原来配置的hadoop data目录快要用满了，故准备修改配置文件增加数据目录，以便扩容，但由于疏忽，把core-site.xml, hdfs-site.xml配置文件dfs.datanode.data.dir 配置项增加了配置目录，但未创建实际目录，重启datanode服务时，报如下错误： 2014-11-18 08:51:39,128 WARN org.apache.hadoop.h
  • grep 目录级联查找 dongwei_6688 grep
           在Mac或者Linux下使用grep进行文件内容查找时，如果给定的目标搜索路径是当前目录，那么它默认只搜索当前目录下的文件，而不会搜索其下面子目录中的文件内容，如果想级联搜索下级目录，需要使用一个“-r”参数： grep -n -r "GET" .   上面的命令将会找出当前目录“.”及当前目录中所有下级目录
  • yii 修改模块使用的布局文件 dcj3sjt126com yiilayouts
    方法一：yii模块默认使用系统当前的主题布局文件，如果在主配置文件中配置了主题比如: 'theme'=>'mythm', 那么yii的模块就使用 protected/themes/mythm/views/layouts 下的布局文件； 如果未配置主题，那么 yii的模块就使用  protected/views/layouts 下的布局文件， 总之默认不是使用自身目录 pr
  • 设计模式之单例模式 come_for_dream 设计模式单例模式懒汉式饿汉式双重检验锁失败无序写入
                    今天该来的面试还没来，这个店估计不会来电话了，安静下来写写博客也不错，没事翻了翻小易哥的博客甚至与大牛们之间的差距，基础知识不扎实建起来的楼再高也只能是危楼罢了，陈下心回归基础把以前学过的东西总结一下。   *********************************
  • 8、数组 豆豆咖啡 二维数组数组一维数组
      一、概念       数组是同一种类型数据的集合。其实数组就是一个容器。   二、好处       可以自动给数组中的元素从0开始编号，方便操作这些元素   三、格式   //一维数组 1,元素类型[] 变量名 = new 元素类型[元素的个数] int[] arr =
  • Decode Ways hcx2013 decode
    A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' -> 1 'B' -> 2 ... 'Z' -> 26 Given an encoded message containing digits, det
  • Spring4.1新特性——异步调度和事件机制的异常处理 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • squid3(高命中率)缓存服务器配置 liyonghui160com
        系统:centos 5.x   需要的软件:squid-3.0.STABLE25.tar.gz 1.下载squid wget http://www.squid-cache.org/Versions/v3/3.0/squid-3.0.STABLE25.tar.gz tar zxf squid-3.0.STABLE25.tar.gz &&
  • 避免Java应用中NullPointerException的技巧和最佳实践 pda158 java
    1) 从已知的String对象中调用equals()和equalsIgnoreCase()方法，而非未知对象。 　　总是从已知的非空String对象中调用equals()方法。因为equals()方法是对称的，调用a.equals(b)和调用b.equals(a)是完全相同的，这也是为什么程序员对于对象a和b这么不上心。如果调用者是空指针，这种调用可能导致一个空指针异常 Object unk
  • 如何在Swift语言中创建http请求 shoothao httpswift
    概述：本文通过实例从同步和异步两种方式上回答了”如何在Swift语言中创建http请求“的问题。 如果你对Objective-C比较了解的话，对于如何创建http请求你一定驾轻就熟了，而新语言Swift与其相比只有语法上的区别。但是，对才接触到这个崭新平台的初学者来说，他们仍然想知道“如何在Swift语言中创建http请求？”。 在这里,我将作出一些建议来回答上述问题。常见的
  • Spring事务的传播方式 uule spring事务
    传播方式：        新建事务       required       required_new   - 挂起当前         非事务方式运行       supports   &nbs
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他