如何通过单击按钮禁用 JQuery 功能，但默认保持打开状态？答案

【问题标题】：How can I disable a JQuery function by clicking on a button, but keep it on by default?如何通过单击按钮禁用 JQuery 功能，但默认保持打开状态？
【发布时间】：2021-10-17 08:32:29
【问题描述】：

我正在创建一个视频播放器，它会在视频结束时重定向到另一个视频页面。

我想添加一个“关闭自动播放按钮”来禁用重定向脚本。

我该怎么做？

我的代码：

<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
  video not supported
</video>
<button id="turnOfAutoPlay">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#myVideo").bind('ended', function() {
        setTimeout(function() {
            location.href = "http://www.localhost.com";
        }, 3000)
    });
});
</script>

【问题讨论】：

标签： javascript html jquery redirect html5-video

【解决方案1】：

您可以使用 unbind() 删除最后触发的侦听器

对于 jQuery 使用 bind()/unbind()

$('#turnOfAutoPlay').click(function() {
  $('#myVideo').unbind('ended');
})

注意： jQuery 3.0 及更高版本 .bind()/.unbind() 已弃用。采用 on()/off()

function videoEndedHandler () {
  setTimeout(function() {
    location.href = "http://www.localhost.com";
  }, 3000)
}

$(document).ready(function() {
  document.getElementId("#myVideo").addEventListener('ended', videoEndedHandler);
});

$('#turnOfAutoPlay').on('click', function() {
  document.getElementId('#myVideo').removeEventListener('ended', videoEndedHandler);
})

【讨论】：

方法已弃用（如您链接到的文档中所述），不应在现代答案中使用
这段代码在这个小代码中运行良好，但在我的项目代码中不起作用。请看：link to my code
嗯。您可以尝试使用香草 JS。我会更新帖子，让你看到

【解决方案2】：

为 setTimeout 函数使用全局变量，并在单击“关闭自动播放按钮”时调用 clearTimeout

示例代码：

var myVar;
function myFunction() {
  myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
  clearTimeout(myVar);
}

编辑：给你

<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
  video not supported
</video>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var myVar;
$(document).ready(function() {
    $("#myVideo").bind('ended', function() {
       myVar = setTimeout(function() {
            location.href = "http://www.localhost.com";
        }, 3000)
    });
});
function myStopFunction() {
  clearTimeout(myVar);
}
</script>

【讨论】：

【解决方案3】：

在上述讨论的帮助下，我稍微修改了我的代码，但我认为它有点笨重??，但它可以工作......

我的代码：

const autoplayCheckbox = document.getElementById('autoplayCheckbox');
const video = document.getElementById('myVideo');

var myVar;

function videoEndedHandler () {
myVar = setTimeout(function() {
    location.href = "http://www.localhost.com";
  }, 10000)
}

//By default autoplay is on.
$(document).ready(function() {
  video.addEventListener('ended', videoEndedHandler);
});

autoplayCheckbox.addEventListener('change', function() {
  if (this.checked) {
  //if autoplay is on
  document.getElementById("demo").innerHTML = "Autoplay: On";
    $(document).ready(function() {
      video.addEventListener('ended', videoEndedHandler);
    });

  } else {
    //if autoplay is off
    document.getElementById("demo").innerHTML = "Autoplay: Off";
    video.removeEventListener('ended', videoEndedHandler);
  }
});

function myStopFunction() {
  clearTimeout(myVar);
  document.getElementById("autoplayCheckbox").checked = false;
  document.getElementById("demo").innerHTML = "Autoplay: Off";
}

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    transition: background 0.4s linear;
    background-color: #8ecae6;
    font-family: 'oswald';
}

.checkbox {
    opacity: 0;
    position: absolute;
}

.checkbox:checked + .label .ball {
    transform: translateX(23px);
}

.label {
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    height: 26px;
    width: 50px;
    transform-scale(2.2);
}

.ball {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 22px;
    width: 22px;
    transition: transform 0.3s linear;
}

  <br/><br/><video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
    video not supported
  </video>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- partial:index.partial.html -->
<div>
<input type="checkbox" class="checkbox" id="autoplayCheckbox" checked="checked">
<label for="autoplayCheckbox" class="label">
   <div class="ball"></div>
</label>
</div>

<p id="demo">Autoplay: On</p>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button><br/><br/>

Turn Of Autoplay button 仅在 10 秒 Timeout 函数运行时有效。我添加了那个按钮，因为在主项目中它也可以作为一个按钮来关闭模式Have a look

我可以缩小它吗？？

【讨论】：