问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

clearTimeout不起作用

头像
xaiobaicac
    314469103

    使用定时器时，有两个按钮，一个是设置定时器，一个是清除定时器，但是clearTimeout并没有起作用，控制台上还是输出，请问是为什么，哪里出错了？
    代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
       var settime=null;
        function insert(){
            settime=window.setTimeout(showalert,3000);
        }
        function showalert(){
            console.log("这是显示语句");
        }
        function clear(){
            window.clearTimeout(settime);
        }
    </script>
</head>
<body>
    <div id="a">
      <h3>setTimeout</h3>
      <button onclick="insert()">显示语句</button>
      <button onclick="clear()">取消显示</button>
    </div>
</body>
</html>
    javascript
    阅读 9.5k
    3 个回答
    得票最新
    头像
    wmaker
      2.9k119
      ✓ 已被采纳

      啊啊，老兄，这种问题之前我也遇到过，很无措。
      原因： clear 是个关键字，你试试改个名字，比如 clear1 就行了。

      ---补充
      抱歉，回答的不太正确。
      你可以这样试试（如下代码），它会打印出：ƒ clear() { [native code] }。
      说明在事件处理的内部的作用域中有一个 clear 方法，它排的比较靠前，表现的就像一直会覆盖你定义的 clear 方法。

      <button onclick="(function() { console.log(clear) })()">Click</button>
      头像
      神圣的叨叨
        668139

        你的取消按钮不会执行的 函数名字是关键字

        头像
        Tauren
          333
              
    可以在启动定时器的时候先清理下已有的timeout
    ```
    function insert(){
        if(settime) window.clearTimeout(settime);
        settime=window.setTimeout(showalert,3000);
    }
    
    function clear(){
        if(settime) {
            window.clearTimeout(settime);
            settime = null;
        }        
    }
    
    ```
    另外，clear为关键字，属于document对象的api，可以尝试如下代码：
    
    ```
    <script>
        document.clear = function(){
            console.log("clear是关键字");
        }
    </script>
    <a href="#" onclick="clear()">click me</a>

    ```
    所以，还需要修改清除定时器的函数名。
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题