js怎么防止重复点击

JavaScript034

js怎么防止重复点击,第1张

1.防止重复点击可以添加标记,第一次点击后变为false,每次点击判断这个标记是true才执行

2.如果是按钮防止重复点击,可以再按钮点击后,给按钮添加disabled属性,按钮就再也点击不了

举个例子:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<button onclick="fn()">方式一</button>

<button onclick="alert('只会出现一次哦,之后想点都点不了')this.disabled = true">方式二</button>

<body>

<script>

    //第一种方式

    var flag = true

    function fn(){

        if(flag){

            flag = false

            alert('只会出现一次哦')

        }

    }

</script>

</body>

</html>

你这写的有点混乱，稍微整理下：

<body>

<div id='odiv'></div>

<script>

var odiv=document.getElementById('odiv')

var num=''

var arr=[] 

/*//这里修改下  

for(var i=0i<4i=i+1){  //生成4个1-5不重复的数字

    var t=Math.floor(Math.random()*5)//生成随机数

    arr.push(t)    //把生成的数字放进这个数组里

}

*/

//修改成这样的：

//定义一个while循环，循环的条件是集合arr的子集少于4个

while(arr.length<4){

  var t=Math.floor(Math.random()*5)//生成随机数

  if(arr.indexOf(t)==-1){

   //如果t在集合arr中存在，indexOf会返回t在集合arr中的位置。

   //如果不存在，indexOf会返回-1

    arr.push(t)    //把生成的数字放进这个数组里

  }

}

for(var i=0i<=arr.lengthi++){

  num=num+(i+1)+':'+arr[t]+'<br/>'

}

odiv.innerHTML=num

/*//上面用到了while循环，并且在内部就直接判断了生成的数字是否在集合中存在

//所以，这里就不需要判断了

function pd(){

  for(var i=0i<arr.lengthi++){

    if(arr[i]===t){

      return true

    }else{

      return false

    }

  }

}

var bol=pd()//比较是否重复

if(bol){

  i--

  continue

}else{

  num=num+(i+1)+':'+t+'<br/>'

}*/

odiv.innerHTML=num

</script>

</body>

把上面不需要的去掉：

<body>

<div id='odiv'></div>

<script>

var odiv=document.getElementById('odiv')

var num=''

var arr=[] 

//修改成这样的：

//定义一个while循环，循环的条件是集合arr的子集少于4个

while(arr.length<4){

  var t=Math.floor(Math.random()*5)//生成随机数

  if(arr.indexOf(t)==-1){

   //如果t在集合arr中存在，indexOf会返回t在集合arr中的位置。

   //如果不存在，indexOf会返回-1

    arr.push(t)    //把生成的数字放进这个数组里

  }

}

for(var i=0i<=arr.lengthi++){

  num=num+(i+1)+':'+arr[t]+'<br/>'

}

odiv.innerHTML=num

</script>

</body>

const nums = [1,2,3,4,3,2,1]

uniq1 = [...new Set(nums)]

uniq2 = Array.from(new Set(nums))

定义：新数据结构Set，类似于数组，但成员值不重复

使用： new Set()

ps：New Set() 接受一个数组或类数组对象,在Set内部， NAN相等，两个对象不等，可以用length检测，可以用for...of遍历

size：返回值的个数

add(val)：添加值，返回set结构；

delete(val)：删除值，返回布尔值

has(val)：是否包含，返回布尔值

clear()：清除所有成员，无返回值

与set类似，也是不重复值的集合

与set的区别：1.weakset 成员只能是对象，对象都是弱引用，垃圾回收机制不考虑，不可遍历

定义：类似于对象，也是键值dui的集合，但键可以是各种类型（键可以为对象），两个键严格相等才为同一个键。

Var m = new Map(), o = {1:2}

m.set(o, ‘hi’)

m.get(o)

m.has(o) //只有对同一个对象的引用才是同一个键

size：返回值的个数

set(key, val)：添加值，返回Map结构；

Get(key): 获取值，返回val

Has(key)：是否包含，返回布尔值

Delete(key)：删除值，返回布尔值

Clear()：清除所有成员，无返回值

定义：把泪数组对象和有iterator接口的对象(Set Map Array)转化为数组

使用：Array.from(arrayLike[, mapFn[, thisArg]]) 参数：类数组，处理函数map，map中的this指向的对象

Array.from([1, 2, 3, 4, 5], (n) =>n + 1) // 每个值都加一

const map = new Map()

map.set(‘k1’, 1)

map.set(‘k2’, 2)

Const a = Array.from(map) // [[‘k1’,1], [‘k2’, 2]]

const set1 = new Set()

Set1.add(1).add(2).add(3)

Var a = Array.from(set1) // [1,2,3]

console.log('%s', Array.from('hello world’)) //["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

console.log('%s', Array.from('\u767d\u8272\u7684\u6d77’)) //["白", "色", "的", "海"]

var a = {0:1, 2:3, 4:5, length: 5}var b = {0:1, 2:3, 4:5, length: 3}

Array.from(a) // [1,undefined,3,undefined,4]

Array.from(b) // [1,undefined,3]