好名字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,前端,交互)

  • JavaScript 高频面试题 好运连连女士 JavaScriptjavascript
    文章目录JavaScript手写防抖和节流CommonJS和ES6模块的区别this指向问题，如何修改this指向引申1:模拟bind引申2：为什么多次绑定，只指向第一次绑定的obj对象?有没有解决办法？引申3:一般函数和箭头函数的区别数据类型有哪些引申1:如何判断数据类型new操作的原理引申1:什么是闭包？引申2:内存泄露和内存溢出引申3:作用域和作用域链？JS实现数组扁平化深拷贝与浅拷贝的区别
  • ChatGPT + Vue3：如何打造 AI 智能助手？ Js_x chatgpt人工智能
    引言人工智能（AI）正快速渗透到前端开发领域，越来越多的开发者希望将ChatGPT集成到自己的应用中，为用户提供智能对话、自动回复、辅助决策等功能。本文将介绍如何使用Vue3+OpenAIAPI搭建一个AI智能助手，让你的应用拥有强大的AI交互能力。1.项目准备1.1技术栈选择本项目将使用以下技术：Vue3-现代化的前端框架，响应式强，适合构建交互式应用。Vite-高效的Vue3项目构建工具，提升
  • JavaScript相关面试题 努力的搬砖人. javascript
    以下是150道JavaScript相关面试题及详细答案：JavaScript基础1.JavaScript是什么？JavaScript是一种直译式脚本语言，主要用于网页开发，也可用于服务器端开发（如Node.js）。它是一种动态类型、弱类型、基于原型的语言，支持函数式编程和面向对象编程。2.JavaScript的基本数据类型有哪些？包括Undefined、Null、Boolean、Number、St
  • 设计模式之外观模式：原理、实现与应用 wenbin_java 设计模式外观模式
    引言外观模式（FacadePattern）是一种结构型设计模式，它通过提供一个统一的接口来简化复杂系统的使用。外观模式隐藏了系统的复杂性，使得客户端可以通过一个简单的接口与系统交互。本文将深入探讨外观模式的原理、实现方式以及实际应用场景，帮助你更好地理解和使用这一设计模式。1.外观模式的核心概念1.1什么是外观模式？外观模式是一种结构型设计模式，它通过提供一个统一的接口来简化复杂系统的使用。外观模
  • 原生JavaScript控制页面跳转的几种方式 thinkQuadratic javascript前端开发语言
    在开发一些简单的页面，不需要复杂的单页面应用（SPA）功能的时候。可以使用原生JavaScript的跳转即可满足需求。另外在处理一些需要直接与服务器进行交互的表单提交后跳转，或者在某些浏览器兼容性要求较高的场景下，原生JavaScript的跳转方式更加稳定可靠。正文开始这里本地创建两个html文件进行演示，index.html和home.htmlwindow.location.hrefindex页
  • python后端常见架构_常见的后端框架 weixin_39622178 python后端常见架构
    后端vs前端如果您是Web开发世界的新手，后端和前端开发之间的区别可能不那么明显，但是，了解两者之间的区别很重要。以下是前端开发人员与后端开发人员的一些区别。前端开发：前端开发人员在很大程度上负责用户所看到的内容(即网站页面)，前端开发人员主要使用HTML，CSS和JavaScript。他们的主要关注点是创建出色的用户体验，并确保网站设计和布局或Web应用程序始终具有凝聚力。后端开发：另一方面，后
  • 使用 CryptoJS 实现 AES 解密：动态数据解密示例 木觞清 javascript
    在现代加密应用中，AES（高级加密标准）是一种广泛使用的对称加密算法。它的安全性高、效率好，适合用于各种加密任务。今天，我们将通过一个实际的示例，展示如何使用CryptoJS实现AES解密，解密动态数据。CryptoJS是一个基于JavaScript的加密库，它支持AES、DES等多种常见的加密算法。本文将详细介绍如何使用CryptoJS解密AES加密的数据。1.引入CryptoJS库首先，确保你
  • 【实习经历Two:参与开源项目，学习并应用Git】 学前端的小乐子 开源社区实习记录学习git
    前端参与开源项目中使用过的git1.参与开源项目（必备技能——git)参与开源项目首先需要进入自己想参加的项目页面点击右边的Fork即可复制到自己的仓库像个人开发时常用的add、commit和push等命令就不过多介绍了，在这里主要是想记录一下自己作为从未参与过开源项目的初学者遇到的一些常用知识点，很感谢本人这次实习的mt老师很有耐心地帮助我解决使用Git过程中遇到的一些问题。a.如何在commi
  • Spark 解析_spark.sparkContext.getConf().getAll() 闯闯桑 spark大数据分布式
    spark.sparkContext.getConf().getAll()是ApacheSpark中的一段代码，用于获取当前Spark应用程序的所有配置项及其值。以下是逐部分解释：代码分解：spark：这是一个SparkSession对象，它是Spark应用程序的入口点，用于与Spark集群进行交互。spark.sparkContext：sparkContext是Spark的核心组件，负责与集群通
  • Axios和ajax的异同点详解以及在express后端使用redirect重定向对ajax无效的原因！ char56789 javascriptnode.jsreactjs
    问题描述：在express中使用redirect进行重定向时，页面显示是301状态码，页面不跳转！（说明在express中不能使用redirect进行重定向）究其原因：使用ajax后，后端无法直接让前端进行页面跳转。需要前端进行状态码和后端返回的数据的判断，然后前端自己进行跳转页面。因为ajax（axios只是对ajax进行了封装，ajax在此处的特性对axios也适用）是一个完整的请求和回掉的过
  • 详细讲一下webpack中五个优化能力十分强大的插件（1-5） asecretman! webpack前端node.js
    1.TerserPlugin功能：用于压缩和优化JavaScript代码，支持ES6+语法。安装:npminstallterser-webpack-plugin--save-dev配置constTerserPlugin=require('terser-webpack-plugin');module.exports={mode:'production',//设置为生产模式，启用优化optimizat
  • JavaScript 异步编程：从回调到 Async/Await 进化 PM简读馆 技术杂谈javascript开发语言ecmascript
    作者简介：程序员转项目管理领域优质创作者个人邮箱：[[email protected]]PMP资料导航：PM菜鸟（查阅PMP大纲考点）座右铭：上善若水，水善利万物而不争。绿泡泡：PM简读馆（包含更多PM常用免费资料）目录1.回调函数（Callback）2.Promise3.Generator4.Async/Await在JavaScript中，异步编程是一个非常重要的概念，因为JavaScript是
  • 前端架构师具备什么能力？前端性能优化全链路指南 kerwin_1727 前端架构师具备什么能力前端性能优化
    前端性能优化全链路指南——从构建到运行，让你的页面飞起来！一、性能优化全链路概览性能优化不是“一招鲜”，而是从构建时到运行时的全流程优化。以下是核心链路：构建时：减少打包体积（TreeShaking、CodeSplitting）。加载时：加速资源加载（懒加载、预加载）。运行时：提升渲染效率（虚拟列表、WebWorker）。监控与诊断：用工具定位问题（ChromePerformance、Lighth
  • html怎么获取父页面的元素的值,使用JavaScript与jQuery怎么在子窗口中获取父窗口的元素值... weixin_39907658
    使用JavaScript与jQuery怎么在子窗口中获取父窗口的元素值发布时间：2021-02-1815:42:20来源：亿速云阅读：115作者：Leah使用JavaScript与jQuery怎么在子窗口中获取父窗口的元素值？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。js:父窗口：子窗口：curproject=window.op
  • jquery查找父窗体id_jquery 获取父窗口的元素、父窗口、子窗口 weixin_39781550 jquery查找父窗体id
    一、获取父窗口元素：$("#父窗口元素ID",window.parent.document)；对应javascript版本为window.parent.document.getElementById("父窗口元素ID")；取父窗口的元素方法：$(selector,window.parent.document);那么你取父窗口的父窗口的元素就可以用：$(selector,window.parent.
  • jquery查找父窗体id_JS与jQuery实现子窗口获取父窗口元素值的方法 北木南烟 jquery查找父窗体id
    这篇文章主要介绍了JS与jQuery实现子窗口获取父窗口元素值的方法,涉及javascript与jQuery操作窗口元素的相关技巧,需要的朋友可以参考下本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法。分享给大家供大家参考，具体如下：功能描述：父窗口有一个input，和一个button，点击button打开子窗口，在子窗口中获取父窗口中input的值，并显示。js:父窗口：子窗口：
  • 前端怎么处理请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个 大莲芒 前端
    在前端处理批量请求时，确保只弹出一个toast通知，可以通过以下步骤实现：使用状态管理首先，您可以使用状态管理工具（例如React的useState或Redux）来跟踪请求的状态。创建一个Toast组件如果还没有创建toast组件，可以简单实现一个。以下是一个基本的Reacttoast组件示例importReactfrom'react';import'./Toast.css';//添加样式cons
  • Spring boot 生成动态验证码并前后端校验 解忧杂货铺Q 大后端javaspringbootvue验证码
    文章目录1生成动态验证码图片2前端调取接口3返回base64字符串3验证验证码最近需要生成一个动态的验证码，在登录页面使用，并在前后端进行校验；实现原理：后端生成动态二维码，存储在session里面；前端调取接口，展示在登录页面；前端登录时候，把验证码传给后端，后端和session里面的值进行对比。1生成动态验证码图片新建一个class类ValidateCode:packagehello;impo
  • 在前后端分离项目中实现验证码功能 不高兴的富贵儿 javaspringboot前端
    目录原理导入验证码依赖Redis工具类RedisUtils配置类CaptchaConfig验证码的文本生成器在SpringBoot里面配置RedisTemplate后端返回验证码接口登录验证(在登录方法之前执行)Login.vue原理通过工具类生成一条算术的验证规则，类似于这样的：1+1=2，其中1+1就是算术规则，2是算术结果。算术规则我们会通过图片流的形式返回给前端显示出来，让用户看到这个算术
  • PyTorch 深度学习实战（17）：Asynchronous Advantage Actor-Critic (A3C) 算法与并行训练 进取星辰 PyTorch深度学习实战深度学习pytorch算法
    在上一篇文章中，我们深入探讨了SoftActor-Critic(SAC)算法及其在平衡探索与利用方面的优势。本文将介绍强化学习领域的重要里程碑——AsynchronousAdvantageActor-Critic(A3C)算法，并展示如何利用PyTorch实现并行化训练来加速学习过程。一、A3C算法原理A3C算法由DeepMind于2016年提出，通过异步并行的多个智能体（Worker）与环境交互
  • 使用 .NET Core 实现 RabbitMQ 消息队列的详细教程 江沉晚呤时 Netcore开发语言后端c#.netcore
    RabbitMQ是一个流行的消息队列中间件，它允许应用程序通过异步消息的方式进行通信。RabbitMQ支持AMQP协议，可以通过多种方式与应用程序交互。在本教程中，我们将深入探讨如何在.NETCore环境中使用RabbitMQ来实现消息队列。我们将学习如何在生产者端发送消息，消费者端接收消息，并确保消息的可靠性。目录安装和配置RabbitMQ安装RabbitMQ客户端库创建生产者（Producer
  • 【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.建立反馈渠道首先，需要为用户提供明确的反馈渠道。可以通过以下方式实现：反馈按钮：在应用的每个页面或关键功能上添加反馈按钮，方便用户随时提交意见。支持邮箱：提供专门的支持邮箱，用户可以通过此邮箱发送详细的问题描述。在线聊天
  • 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其他