解决重复点击播放视频卡顿问题 - 使用变量控制播放状态 - 常规

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>WebCat</title>
    <style>
      *{
       margin:0;
        padding:0;
       }
      img{
        width:100vw;
       }
     #inp,#nop{
       text-align:center;
       font-size:10vw;
       }
    </style>
  </head>
  <body>	
	<img src="img1/1.jpg" id="img" />
    <div id="inp">播放视频</div>
 <script>
 //var eso = 0;
 const audio = new Audio('mp3/gu.mp3');
let isPlaying = false;
 inp.onclick=function(){
  if (!isPlaying) {
    isPlaying = true;
    audio.play();
    wdsj(1525);
  }
}
/*function wdsj(hbg){
 let gg = hbg+1;
 let ii = 1;
setInterval(function(){
 if(ii<gg){bofang(ii);ii++}},25);
}*/
<p>function wdsj(hbg){
let gg = hbg+1;
let ii = 1;
let count = 0;
let timer = setInterval(function(){
if(ii&lt;gg){
bofang(ii);
ii++;
count++;
if(count &gt;= gg) {  // 执行10次后清除定时器
clearInterval(timer);
isPlaying = false; // 播放完毕后重置为false
}
}
}, 25);
eso=0;
}
function bofang(fps){
img.src = &quot;img1/&quot;+fps+&quot;.jpg&quot;;
console.log(fps);
}
</script></p>
  </body>
</html>
重复点击播放视频产生卡顿，怎么让后面执行完，再让播放视频可以点击内容：可以使用一个变量来记录是否正在播放视频，如果正在播放，则不执行点击事件。当视频播放完毕后，再将变量重置为false，以便下次可以再次点击播放视频。
<p>例如：</p>
<script>
let isPlaying = false;
const audio = new Audio('mp3/gu.mp3');

inp.onclick = function() {
  if (!isPlaying) {
    isPlaying = true;
    audio.play();
    wdsj(1525);
  }
}

function wdsj(hbg) {
  let gg = hbg + 1;
  let ii = 1;
  let count = 0;
  let timer = setInterval(function() {
    if (ii < gg) {
      bofang(ii);
      ii++;
      count++;
      if (count >= gg) {
        clearInterval(timer);
        isPlaying = false; // 播放完毕后重置为false
      }
    }
  }, 25);
}

function bofang(fps) {
  img.src = "img1/" + fps + ".jpg";
  console.log(fps);
}
</script>