Annie的博客

clipboard想必大家都很熟悉了，用起来也很简单，

有些请求是不应该重复发起的，比如提交表单的post请求或刷新页面数据的get请求。当首次请求未响应时，大部分情况下不应再发起重复请求，这时就要对重复请求进行拦截。拦截操作可在axios的请求与响应拦截器中统一进行。import axios from 'axios'import { baseURL } from '@/config'const instance = axios.create({ baseURL: baseURL, timeout: 30000 });// 定义存放已发送...

一、问题背景 开发中，经常会遇到以下场景：监听鼠标移动 onmousemove，监听页面滚动 onscroll，监听大小变化 onresize，监听 input 输入等。这些场景下，事件会被频繁触发，但我们并不想事件被频繁触发，这时就需要通过防抖和节流来限制频繁操作。二、两者区别 防抖和节流都是为了解决事件频繁触发的问题，但在实现原理上有些不同。 防抖函数（debounce）是在短时间内多次触发同一事件时，只执行第一次或最后一次。根据执行时机，可有两种写法。...

最近给客户部署的一个项目，客户反馈说持续运行一段时间后浏览器会崩溃，如下图。收到反馈后，我们使用自己的设备进行测试，持续运行了48小时，页面并没有崩溃。

isNaN(null)，返回值是true还是false？

&&运算'a' && undefined'a' && {a:1}

数据返回iconfont编码格式为：将编码格式改为：\ue601

正常情况下触发双击dblclick事件时会同时触发两遍单击click事件，这肯定不是我们想要的结果，那么如何避免伴随触发click事件呢？ 浏览器监听双击事件的机制是，有没有在一定时间内监听到两次连续的单击事件，从这个角度出发，我们可以对单击事件进行延时执行，若在一定时间内没有第二次单击事件，则执行单击事件代码；若监听到了第二次单击事件，则执行双击事件，而不执行单击事件。...

1、mouseover和mouseout的效果是对应的；mouseenter和mouseleave的效果是对应的。2、两者在使用时若没有子元素，效果是相同的。3、mouseover和mouseout在从父元素进入子元素或从子元素移除到父元素时都会触发。4、mouseenter和mouseleave只与父元素相关，与子元素不相关，更常用。 复制下方实例，可在浏览器中体验两者...

假如有这样一个数组，要求找出数组两两相同的元素，并标记其所在数组的索引。var arr = [ [ {name:'Keith'}, {name:'Annie'}, {name:'Joy'}, {name:'Eddie'}, ], [ {name:'Keith'}, ...

今天又遇到一个bug，最后定位原因是concat使用方法不当。简化代码如下：var postData = { filters:[{ value:[1,2,3] }]}var filters = postData.filtersvar extra = [{ value:[1]}]var newFilters = filters.concat(extra)co...

    今天遇到一个怪异问题，许久摸不到头脑。    代码是这样的，Vue项目中，给data中的dimension赋值，遍历数组更改属性。this.dimension = dataJson.schema.dimension;console.log(this.dimension);for (var m = 0; m < this.dimension.length; m++) {...

    看到这篇文章的时候，大家可以F12，在控制台输入以下语句，验证下图中的输出结果。    为什么会输出这样的结果呢？我们要站在计算机的角度考虑这个问题。    计算机读的是二进制，所以我们把a，b转换成2进制    a : 0.0001 1001 1001 1001…（无限循环）    b : 0.0011 0011 0011 0011…（无限循环）    双精度浮点...

    eval()可以计算某个字符串，并执行其中的js代码。实际使用中，用到的场景并不多，但是了解一下这个强大的函数，说不定，在遇到疑难杂症的时候就派上用场了。    eval(string); //string是必需参数，含有要计算的js表达式或需要执行的语句    我的疑难杂症就是，要定义个数不确定的n个变量。    首先，通过循环遍历出定义变量的语句，再通过eval执行这些语...

window.onload = function() { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touchstart', function(event) { if (event.touches.length > 1) { event.prevent...

一、问题的起因偶然发现，在某些浏览器中显示的图表，日期排序混乱，如下图。逐步排查原因：1、接口返回的数据没有问题2、大部分浏览器显示没有问题，只有Chrome浏览器有问题3、新版本的Chrome浏览器没有问题，出现问题的浏览器版本在70以下二、真相只有一个 考虑到谷歌浏览器在70版本后，对sort方法进行了调整，遂定位到问题的原因为sort排序的问题。为了...

一、问题 浏览器出于安全考虑，当发现前端xhr请求跨域时，会进行校验，若校验不通过，则会报错。二、解决思路 1、禁止浏览器校验缺点：需用户操作，存在安全隐患 2、使用jsonp代替xhr原理：发送请求时增加了约定参数（默认为callback），后台接受到约定参数后将返回的数据由json转为JavaScript，使用函数调用的形式，函数名是约定参数的值，函数值是...

一、数组是不能直接用‘==’来判断是否相等的二、一般情况下，可以使用toString来判断三、本质上的缺陷 我们知道toString只是将数组中的每一项，拼接成一个字符串，如下图 这样就产生了判断的局限性，如下图，输出的true并不是我们想要的结果四、更优化的方法JSON.stringify 如下图，上述两种情况都正确输出了fa...

reduce()是数组的原生方法，与forEach()、map()等方法一样，都会对数组中的每一项进行遍历，接收两个参数，返回数组遍历后最终运算的结果，语法如下：Array.reduce(function(result,curValue,curIndex,array), initialValue)参数一，必需，用于执行数组中每一项的函数，包括四个参数 result-必需：当...

共同点：调用一个对象的一个方法，用另一个对象替换当前对象 将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象不同点// apply方法,只能接收两个参数,新this对象和一个数组argArrayfunction.apply(thisObj[, argArray]);// call方法,可以接受多个参数，新this对象和一串参数列表function.call...